Flutter使用状态管理工具Mobx

MobX 是一个状态管理库，它可以轻松地将应用程序的响应数据与 UI 连接起来。这种接线是完全自动的，感觉很自然。作为应用程序开发人员，您完全专注于需要在 UI（和其他地方）中使用的反应数据，而不必担心保持两者同步。

任何源自应用状态的东西都应该自动地获得。(其中包括UI、数据序列化、服务器通讯，等等)

Mobx的三个重要概念

• Observables: 表示响应式的状态，也可理解为可观察对象。状态指的是应用程序里面的状态或者数据。响应式就是可以感知到、可观察到数据的变化，也就是我们经常接触到的观察者模式。
• Actions: Actions就是一系列可以引发状态发生变化的动作。
• Reactions: 状态的观察者，状态发生变化的时候，他们可以收到数据变化的通知。

InStalling

用Dart添加：

dart pub add mobx
复制代码

用flutter添加

flutter pub add mobx
复制代码

**注：**除了添加Mobx以外还需要添加build_runner和mobx_codegen

flutter pub add build_runner
flutter pub add mobx_codegen
复制代码

开始

新建一个couter，里面就存一个value值，添加2个方法改变该值

import 'package:mobx/mobx.dart';

//就是当前的counter.dart文件其中加上g映射文件
part 'counter.g.dart';

class Counter = _Counter with _$Counter;
//这里添加可以多个界面共用当前状态
final Counter counter = Counter();

//MARK: 注意旧版本用的是implements，新版本需要变更为with

abstract class _Counter with Store {
  @observable
  int value = 10;

  @action
  void increment() {
    value++;
  }

  @action
  void decrement() {
    value--;
  }
}
复制代码

这时候

part 'counter.g.dart';

class Counter = _Counter with _$Counter;
复制代码

会变红，不要紧。还需要通过build_runner第三方帮我们生成文件，到项目根目录执行

flutter packages pub run build_runner build
复制代码

会自动生成counter.g.dart文件（注意：需要先写好以上2句代码，执行build_runner才能生成文件）

如果要在进行更改时使其在后台运行，请使用：

flutter packages pub run build_runner watch
复制代码

添加Observer观察者

Observer({Key? key, required this.builder, String? name})
      : debugConstructingStackFrame = debugFindConstructingStackFrame(),
        super(key: key, name: name);
//builder是一个WidgetBuilder
复制代码

所以在需要观察的地方套上一层Observer就可以

Observer(builder: (_) => Text(
                      "${counter.value}"
                    )),
复制代码

当我们添加完观察者后怎么来变更值来改变UI呢（通过action）

这时候直接调用Counter的increment和decrement这2个action方法就能改变counter值

TextButton.icon(onPressed: counter.decrement,
                     icon: const Icon(Icons.remove),
                     label: const Text('减'))

TextButton.icon(onPressed: counter.increment,
                     icon: const Icon(Icons.add),
                    label: const Text('加')),
复制代码

或者直接变更值也可以

TextButton(onPressed: () => {counter.value += 2},
               child:const Text('直接改变counter的值', 
	       style:TextStyle(fontSize: 30.0)),
            )
复制代码

demo地址

github.com/weisionXu/f…