装置:
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.jsstores = { 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]
}