mobx安装及其简单使用

Posted 2021-09-03 c三只布朗熊

安装：

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]

}