依賴(lài)
dependencies:
mobx: ^0.1.4
flutter_mobx: ^0.1.3
dev_dependencies:
mobx_codegen: ^0.1.3
build_runner: ^1.4.0
創(chuàng)建對(duì)象
以計(jì)數(shù)例子為例凫佛，創(chuàng)建一個(gè)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;
}
關(guān)于以上代碼的解釋?zhuān)?br>
@observable 可觀察對(duì)象借跪，需要在UI層顯示的數(shù)據(jù)可以這樣定義。
@observable
int count = 0;
@action 操作方法酌壕，要對(duì)可觀察對(duì)象的值進(jìn)行更改時(shí)掏愁，都應(yīng)該在@action修飾發(fā)方法中進(jìn)行修改歇由，業(yè)務(wù)代碼的操作也是在這個(gè)注解下的方法進(jìn)行。
@action
void add() {
count++;
}
@computed 計(jì)算果港，基于@observable來(lái)計(jì)算其值的函數(shù)沦泌，如計(jì)算count值是否是偶數(shù)，在list中篩選特定條件下的子項(xiàng)等辛掠。
@computed
bool get isEven => count % 2 == 0;
注意：必須包含以下兩行代碼谢谦，才可以生成counter.g.dart文件
part 'counter.g.dart';
class Counter = CounterBase with _$Counter;
在命令行中執(zhí)行命令
flutter packages pub run build_runner build
完成后將會(huì)生成counter.g.dart文件
執(zhí)行一下命令，可以實(shí)現(xiàn)counter.g.dart文件的動(dòng)態(tài)生成
flutter packages pub run build_runner watch
即修改counter.dart文件后 ctrl + s（熱重載）即可重新生成公浪。
數(shù)值顯示
在需要顯示count值的時(shí)候，使用如下代碼：
Observer(builder: (_) => Text('${counter.count}')),
Observer是一個(gè)觀察者船侧，繼承了StatefulWidget欠气，將要觀察的組件放置在里面，就能實(shí)現(xiàn)對(duì)該組件的狀態(tài)管理镜撩。
數(shù)值操作
在counter.dart中有add()预柒、minus()和setCount()三個(gè)方法對(duì)count的值進(jìn)行修改≡＃可在按鈕的點(diǎn)擊事件中調(diào)用相關(guān)方法進(jìn)行修改宜鸯，如下：
RaisedButton(
child: Text('加'),
onPressed: counter.add,
),
以上就是flutter mobx的簡(jiǎn)單使用方法。
完整代碼案例詳見(jiàn)GitHub：https://github.com/huang-weilong/flutter_state_management
