mobx安装及其简单使用

安装: 【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]

}

    推荐阅读