Flutter 状态管理: 使用 MobX

最新推荐文章于 2024-08-20 18:04:31 发布

FlutterDevs

最新推荐文章于 2024-08-20 18:04:31 发布

阅读量286

点赞数

文章标签： dart java android python eclipse

本文链接：https://blog.csdn.net/flutterdevs/article/details/116078397

版权

本文介绍了在Flutter中使用MobX进行状态管理的方法，包括初始化项目、创建计数器状态、与Store绑定的步骤。通过示例展示了如何创建一个简单的计数器应用，强调了MobX自动处理视图更新的优势。

摘要由CSDN通过智能技术生成

文 / Paul Halliday, developer.school 创始人

众所周知，状态管理是每个软件项目都需要持续迭代更新的方向。它并不是一个「一次性」的工作，而需要不断确保你遵循的最佳实践能够让你的工程保持良好的可维护性。

要在 Flutter 中高效地使用 MobX ，需要遵循以下原则：

我们能访问任意状态中的可观察对象（即在我们应用运行过程中发生变化的变量）。
我们可以在 View 中展示这些状态，并响应 Action 意图。
我们可以修改状态，从而更新可观察对象以及相应的 View。

那么它的优势在哪呢？答案是，通过 MobX 完成这一切将会变得超级简单！codegen 工具可以帮我们完成绝大部分模版化的工作。

初始化项目

让我们从创建一个全新的 Flutter 工程开始吧：

# New Flutter project
$ flutter create f_mobx && cd f_mobx
 
# Open in VS Code
$ code .

下一步，我们得在 pubspec.yaml 中拉取一些依赖 (dependencies 与 dev_dependencies):

dependencies: 
 flutter:
    sdk: flutter
 
  mobx:
  flutter_mobx:
 
dev_dependencies:
  flutter_test:
    sdk: flutter
 
  build_runner: ^1.3.1
  mobx_codegen:

之后我们可以在 main.dart 中创建一个全新的 MaterialApp 以放置我们的 CounterPage。

import 'package:f_mobx/pages/counter_page.dart';
import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: CounterPage(),
    );
  }
}

下一步，我们需要在 lib/pages/counter_page.dart 中创建 CounterPage