一、版本组合
mobx(v5) + mobx-react(v6) 编写语法还有ES5、ES6两种。
mobx(v6) + mobx-react(v7) 编写语法还有ES5、ES6两种。
以下mobx(v6) + mobx-react(v7) 用ES6语法、函数式组件为例，说明集成mobx架构的一般步骤：
1、安装mobx(v6)，用面向对象语法编写store和子store的代码逻辑，参见store目录。
2、安装mobx-react(v7)，在App根组件中，使用<Provider {...store} />
3、在React组件中，使用 inject('user')(observer(props=>(）））
inject('参数')(UI) 从上下文中取出数据，注入到当前组件的props上
observer(UI) 把当前组件变成观察者，当store数据发生变化时，组件将会自动更新
注意：inject必须套在observer的外面。怎么记？先做人（成为观察者）再做事（使用store数据写业务）
原则：使用状态管理工具，一定要分模块
二、子store
import StudyStore from './modules/study'
import UserStore from './modules/user'
三、根store
class Store {
constructor() {
this.study = new StudyStore()
this.user = new UserStore()
}
}
四、makeObservable
语法
makeObservable(this, {})
export default class StudyStore {
constructor() {
makeObservable(this, {
msg: observable,
num: observable,
changeNum: action,
num2: computed,
list: observable,
getList: action
})
}
根据开发者的需求，把指定的成员属性变成observable变量，把成员方法变成action。
五、makeAutoObservable
语法
export default class UserStore {
constructor() {
makeAutoObservable(this)
}
token = 'token'
}
makeAutoObservable(this) 作用是把当前对象上的成员属性变成observable变量，把成员方法变成action方法。
