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…