第一次使用 mobx 感觉一脸懵逼( 以下为我抄袭别人的写法 照葫芦画瓢 )

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 中数据的页面都会同步刷新

标签：info,抄袭,const,..,runInAction,照葫芦画瓢,mobx,import,self
来源： https://www.cnblogs.com/liuyuexue520/p/13573208.html