记录开发中关于mobx使用
问题1:
mobx不更新视图,状态更改数据后不触发render发现是版本问题,在mobx6.x版本需要在constructor配置makeObservable
makeObservable
问题2:
react全局注入mobx,代码实现通过Provider传入,内嵌router。在子组件中拿不到传入的store
1、全局注册 <Provider AppStore={store}></Provider>
import React from 'react';
import { Provider } from 'mobx-react'
import store from './store';
<Provider AppStore={store}>
<React.StrictMode>
<App />
</React.StrictMode>
</Provider>
2、子组件注入下,@inject('AppStore')
import { inject, observer } from 'mobx-react';
import { observable, computed , makeObservable} from "mobx";
@inject('AppStore')
@observer
@computed get title() {
return this.props.AppStore.title;
}
changeStore = () => {
this.props.AppStore.setGlobalTitle('新标题')
}
补充: 状态管理基础用法
import { observable, computed , makeObservable} from "mobx";
// 创建
@observable value = 2
@observable amount = 3
@computed get total(){
return this.value * this.amount
}
// setter一定要定义在getter后,一些typescript版本会认为声明了两个名称相同的属性而报错
set total(val){
this.value = val
}