react mobx的配置

mobx状态管理实现有两种写法: 装饰器写法和非装饰器写法, 官方推荐使用装饰器语法  

(一): 非装饰器语法:
1, 下载安装模块   mobx  和  mobx-react  
    cnpm i mobx@5 mobx-react@6 --save
2, 创建状态管理文件 /src/store/index.js  导入工具函数
    import { observable, action } from "mobx";
3, 定义状态管理仓库数据 和 数据更新函数
    let appState = observable({
        name: 'zhangsan'
    });
    appState.setName = action((value) => {
        appState.name = value;
    });
4, 导出状态管理仓库
    export default  appState
5, 在入口文件index.js中导入状态仓库store和状态更新供应组件Provider
    import {Provider} from "mobx-react"
    import store from "./store/index"
6, 在入口文件index.js中,使用Provider 包裹App根组件, 并设置store
    <Provider store={store} >
        <HashRouter>
              <App />
        </HashRouter>
      </Provider>
7, 在使用状态管理的组件中导入inject(注入)函数和observer(观察者)函数, 都是高阶组件
    import {inject, observer } from "mobx-react";
8, 在导出组件之前,使用高阶组件把store注入props中并添加观察者
    export default inject("store")(observer(Home))
9, 在组件中通过this.props.store调用状态仓库中的数据或更新函数
    this.props.store.name
    this.props.store.setName("lisi")

(二): 装饰器语法:
1, 终端执行指令, 暴漏服务端配置文件和信息
    npm run eject
2, 在package.json文件下找到bebel属性, 增加下面配置
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
              "legacy": true
            }
        ]
    ]
3, 下载安装模块   mobx  和  mobx-react  
    cnpm i mobx@5 mobx-react@6 --save
4, 创建状态管理文件 /src/store/index.js  导入工具函数
    import { observable, action } from "mobx";
5, 定义仓库类, 创建仓库数据并设置更新函数
    class Store {
            @observable name = '铁柱';
            @action setName (option) {
                  this.name = option
            }
      }
6, 创建仓库对象并导出
    export default new Store()
7, 在入口文件index.js中导入状态仓库store和状态更新供应组件Provider
    import {Provider} from "mobx-react"
    import store from "./store/index"
8, 在入口文件index.js中,使用Provider 包裹App根组件, 并设置store
    <Provider store={store} >
            <HashRouter>
                  <App />
            </HashRouter>
      </Provider>
9, 在使用状态管理的组件中导入inject(注入)函数和observer(观察者)函数, 都是高阶组件
    import {inject, observer } from "mobx-react";
10, 在组件创建时, 使用装饰器语法store注入props中并添加观察者
    @inject("store")
    @observer
    class Home extends React.Component{}
    export default Home
11, 在组件中通过this.props.store调用状态仓库中的数据或更新函数
    this.props.store.name
    this.props.store.setName("lisi")
注: 如果状态数据更新,视图没刷新, 且没报错, 可能是mobx和mobx-react版本不匹配, 注意版本  "mobx": "^5.15.4", "mobx-react": "^6.3.1"