mobx状态管理实现有两种写法: 装饰器写法和非装饰器写法, 官方推荐使用装饰器语法
(一): 非装饰器语法:
1, 下载安装模块 mobx 和 mobx-react
cnpm i mobx mobx-react --save
2, 创建状态管理文件 /src/store/index.js 导入工具函数
import { observable, action } from "mobx";
3, 定义状态管理仓库数据 和 数据更新函数
let appState = observable({
name: '吴亦凡'
});
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("罗志祥")
(二): 装饰器语法(推荐):
1, 终端执行指令, 暴漏服务端配置文件和信息
npm run eject
2, 在package.json文件下找到bebel属性, 增加下面配置
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
3, 下载安装模块 mobx 和 mobx-react
cnpm i mobx mobx-react --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中并添加观察者
export default
@inject("store")
@observer
class Home extends React.Component{}
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"
