flutter mobx状态管理

依赖

dependencies:
  mobx: ^0.1.4
  flutter_mobx: ^0.1.3

dev_dependencies:
  mobx_codegen: ^0.1.3
  build_runner: ^1.4.0

创建对象

以计数例子为例，创建一个counter.dart文件，代码如下：

import 'package:mobx/mobx.dart';
part 'counter.g.dart';

class Counter = CounterBase with _$Counter;

final Counter counter = Counter();

abstract class CounterBase implements Store {
  @observable
  int count = 0;

  @action
  void add() {
    count++;
  }

  @action
  void minus() {
    count--;
  }

  @action
  void setCount(int value) {
    this.count = value;
  }

  @computed
  bool get isEven => count % 2 == 0;
}

关于以上代码的解释：
@observable 可观察对象，需要在UI层显示的数据可以这样定义。

 @observable
  int count = 0;

@action 操作方法，要对可观察对象的值进行更改时，都应该在@action修饰发方法中进行修改，业务代码的操作也是在这个注解下的方法进行。

 @action
 void add() {
    count++;
  }

@computed 计算，基于@observable来计算其值的函数，如计算count值是否是偶数，在list中筛选特定条件下的子项等。

 @computed
 bool get isEven => count % 2 == 0;

注意：必须包含以下两行代码，才可以生成counter.g.dart文件

part 'counter.g.dart';
class Counter = CounterBase with _$Counter;

在命令行中执行命令

flutter packages pub run build_runner build

完成后将会生成counter.g.dart文件
执行一下命令，可以实现counter.g.dart文件的动态生成

flutter packages pub run build_runner watch

即修改counter.dart文件后 ctrl + s（热重载）即可重新生成。

数值显示

在需要显示count值的时候，使用如下代码：
Observer(builder: (_) => Text('${counter.count}')),
Observer是一个观察者，继承了StatefulWidget，将要观察的组件放置在里面，就能实现对该组件的状态管理。

数值操作

在counter.dart中有add()、minus()和setCount()三个方法对count的值进行修改。可在按钮的点击事件中调用相关方法进行修改，如下：

RaisedButton(
  child: Text('加'),
  onPressed: counter.add,
),

以上就是flutter mobx的简单使用方法。
完整代码案例详见GitHub：https://github.com/huang-weilong/flutter_state_management