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;
  }
}
复制代码

注意：必须包含如下两行代码，才能够生成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：github.com/huang-weilo…