dva umi create-react-app 三个脚手架

mobx状态管理工具

1. npm install mobx -Smobx只是用于定义状态管理的容器

2. 封装store

   // music.js
   import {
     observable, // 用于定义可共享的数据，相当于vuex中的 state
     action,     // 相当于vuex中的 mutations + actions
     computed,   // 相当于vuex中的getters
     makeObservable,
     makeAutoObservable
   } from 'mobx';
   export default class MusicStore {
     constructor() {
       // makeAutoObservable(this);
       makeObservable(this, {
         msg: observable,
         hehe: action,
         total: computed
       })
     }
     msg = 'hello mobx';
     hehe () {
          
     }
     // 计算属性前要加上get
     get total () {
       return 
     }
      
     // mobx5 写法
     // @observable
     // list = []
     // @action
     // hehe(){}
     // @computed
     // get total () {
     //   return 
     // }
   }
      
   // index.js
   import MusicStore from './modules/music';
   class Store {
     constructor() {
       // 在这里对子store进行实例化
       this.music = new MusicStore();
     }
   }
   export default new Store();
   

3. npm i mobx-react -S 用于把mobx和react连接起来

   • 在App.js中，使用mobx-react提供的<Provider store={store}></Provider>包裹组件
   • 在具体的组件中使用，使用mobx-react提供的两个高阶组件 inject('store')(observer(UI组件))把状态数据注入到组件中（通过props访问），并把组件变成观察者（当store中数据变化时，组件自动更新）