yarn add mobx yarn add mobx-react
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;
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 }] ]
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')