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')