mobx安装及其简单使用

安装：

yarn add mobx(单独的js 文件)
yarn add mobx-react(react和mobx进行绑定)
父组件 数据注入
子组件 获取(任意组件)

新建store/store.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

第一步：引入store文件和mobx-react
第二步：定义一个对象,用Provider将App进行包裹

const stores = {
  FStore: new FirstStore(),
}

父级注入管理

1、引入mobx-react Provider
2、引入store.js

new Store()
引入一个新的store.js
stores = {
    newStore: new newStore(),
    newStore1: new newStore1(),
    newStore2: new newStore2(),
}

3、Provider 注入 {...store}

任意子页面使用mobx

1.import { NavLink, withRouter } from 'react-router-dom'
2.import {observer,inject} from 'mobx-react';
3.在类组件之上
@withRouter
@inject('FirstStore')
@observer

函数组件使用mobx 结果hook

1.import { withRouter } from 'react-router-dom'
2.import { observer, MobXProviderContext, inject } from 'mobx-react'
3.
function useStores(name) {

return React.useContext(MobXProviderContext)[name]

}