React mobx 状态管理

记录开发中关于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
  }