import { observable, action, computed, runInAction } from "mobx"; import { GET_USERINFO_URL } from "../api/index"; import fetch from "../utils/request"; class UserInfo { @observable loading = false; @observable info = {}; @action async get_user_info() { try { const info = await fetch({ url: GET_USERINFO_URL }); runInAction("setUserInfo", () => { self.info = info; }); console.log(info); return info; } catch (e) { console.log("error", e); runInAction(() => { self.info = {}; }); } runInAction(() => { self.loading = false; }); return false; } } // // 不直接使用this可以避免this指向变化带来的问题 const self = new UserInfo(); export default self;
需要用到counter 的页面
// 1 导入 API import { GET_CARD_URL, GET_USERINFO_URL } from "../../../api/index"; // 2 导入两个模块 import { inject, observer } from "@tarojs/mobx"; // ???????? @inject((stores) => ({ info: stores.counterStore, })) @observer // 4 在生命周期里面 延时调用counter 中的方法 // 生命周期函数 async componentDidMount() { await this.getUserCardInfo(); // 获取用户信息 await this.getUserInfo(); // 调用 store.info = setTimeout(() => { store.get_user_info(); }, 0); // 5 初始化需要用到的 conter 中的数据 // 这里的info 应该是 和 上面 inject 中的 info 同名字 具体的 用法 未知 const { info: info = {} } = this.props.info; const { name_nick = "XXX" } = info; // 6. 在 render 的 return 中就能直接拿到 结果 // 7. 别的页面更新了东西, 如果影响到 当前页面, 就可以直接使用 import store from '../../路径' // counter的路径 // 然后通过点的方式调用里面的方法 store.get_user_info(); // 所有用到 counter 中数据的页面都会同步刷新