mbox+react

下载 MobX

npm install mobx mobx-react

mbox工作流程

MobX的基本使用

 1. 创建store 对象 存储默认状态0

2. 将store对象放在一个全局的 组件可以够的到的地方

3. 让组件获取store对象中的状态 并将状态显示在组件中

更正普通函数的this指向

  @action.bound increment () {
    this.count = this.count + 1;
  }
  @action.bound decrement () {
    this.count = this.count - 1;
  }

在异步函数中更新数据

1. runInAction方法

  @action.bound async getData () {
    let { data } = await axios.get('https://api.github.com/users');
    runInAction(() => this.users = data);
  }

2. flow方法

 getData = flow(function* () {
    let { data } = yield axios.get('https://api.github.com/users');
    this.users = data
  }).bind(this)

 

MobX数据监测

1. computed 计算值

• 计算值是可以根据现有的状态或其它计算值衍生出的值

• 将复杂的业务逻辑从模板中进行抽离

• 计算值示例

• 

 

2. autorun 方法

当监测的状态发生变化时，你想根据状态产生 "效果"，请使用 autorun。

autorun 会在初始化的时候执行一次，会在每次状态发生变化时执行。