Mobx的使用

安装语法

yarn add mobx yarn add mobx-react

类组件

一、在src下创建store文件创建index.js里引入以下代码

import { observable, computed, action, autorun, runInAction } from 'mobx';
// import {observable, computed, action} from 'mobx';
class Store {
  @observable tradeCfg = {
    'sadf': 'sadf'
  };
  @observable baseInfo = {};
  @observable callback = null;
  @observable token = [
    {
      "id": 1,
      "name": "YD"
    },
    {
      "id": 2,
      "name": "ETH"
    }
  ];
}
export default Store;

二、 在router.js里

1.引入import { Provider } from 'mobx-react'; 2.引入我们创建的store.js（多个或一个） 3.使用store需要new一下 new Store 因为store里是面向对象 4.用Provider进行包裹 {…stores}

@语法糖报错 解决办法安装下面两个命令 yarn add @babel/plugin-proposal-decorators yarn add @babel/plugin-proposal-class-properties

安装完成后把package.json里的babel里的presets替换掉 "presets": [ ["react-app"], ["@babel/preset-react"] ], "plugins": [ ["@babel/plugin-proposal-decorators", {"legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose" : true }] ]

三、任意子页面上使用mobx

1.引入import { withRouter } from 'react-router-dom';

2.引入import { observer, inject } from 'mobx-react';

3.在类组件上引入@withRouter @inject('Fstore') @observer 4.在render下打印props

函数组件

1.引入import { withRouter } from 'react-router-dom' 2.引入import { observer, MobXProviderContext } from 'mobx-react' 3.自定义一个函数 作用是：相当于把React.useContext(MobXProviderContext).Fstore进行封装 减少大量的.操作 function useStores(name) { return React.useContext(MobXProviderContext)[name] } 4. 用withRouter包裹observer包裹组件 例如： withRouter(observer(Mobx)) 等同于 @withRouter @inject('Fstore') @observer

调用方式 const { tradeCfg } = useStores('Fstore')