在flutter中使用mobx

使用flutter写的电影播放软件：https://github.com/Mockingbird1234/skapp

开源不易，感兴趣的小伙伴给个star吧。

什么是mobx？

如果你对vue或者react比较了解，那么一定听说过vuex或者redux，它们都是状态管理工具，mobx也属于状态管理工具，它的使用方式个人感觉比redux简单，没有那么多条条框框，记住一点就好：使用@observable定义的变量一定要使用@action去修改它的值，这样才能做到状态统一管理。

mobx中的一些概念这里就不作介绍了，下面主要介绍下我在自己的flutter项目skapp中如何使用mobx的。

在flutter中使用mobx

1.首先安装mobx的dart包，在pubspec.yaml文件中的dependencies字段中加入如下代码：

image.png

这里安装了两个插件，版本以官网最新版为主

2. 在pubspec.yaml文件中的dev_dependencies安装另外两个插件：

image.png

这两个插件用于mobx代码生成

3. 在lib目录下创建store目录用于存放mobx状态变量

image.png

这是我项目中使用的结构，结构因人而异

4. 以search.dart为例介绍下使用方法，

/*
 * Created: 2020-04-07 15:55:59
 * Author : Mockingbird
 * Email : 1768385508@qq.com
 * -----
 * Description:
              1. 执行命令: flutter packages pub run build_runner build
              2. 删除之内再生成: flutter packages pub run build_runner build --delete-conflicting-outputs
              3. 实时更新.g文件: flutter packages pub run build_runner watch
 */

import 'package:mobx/mobx.dart';
import 'package:shared_preferences/shared_preferences.dart';
import './../../http/API.dart';
import './../../http/http_request.dart';
import './../../dao/search_dao.dart';

/// 必须, 用于生成.g文件
part 'search.g.dart';

class SearchStore = SearchStoreMobx with _$SearchStore;

abstract class SearchStoreMobx with Store {
  String searchUrl = API.SEARCH_URL;

  @observable
  bool isLoading = false;

  @observable
  ObservableList searchLists = ObservableList();

  @action
  Future<dynamic> fetchData(String keyword) async {
    this.isLoading = true;
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String cIp = prefs.getString('ip') ?? API.BASE_SK_URL;
    bool isMusic = prefs.getBool('isMusic') ?? false;
    String preApiUrl = isMusic ? API.PRE_MUSIC_API_URL : API.PRE_API_URL;
    var req = HttpRequest(cIp);
    final res = await req.get(preApiUrl + searchUrl + keyword);
    searchLists.addAll(SearchDao.fromJson(res).data);
    this.isLoading = false;
  }

  @action
  Future<dynamic> fetchMusicData(String keyword, String type) async {
    this.isLoading = true;
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String cIp = prefs.getString('ip') ?? API.BASE_SK_URL;
    bool isMusic = prefs.getBool('isMusic') ?? false;
    String preApiUrl = isMusic ? API.PRE_MUSIC_API_URL : API.PRE_API_URL;
    var req = HttpRequest(cIp);
    final res =
        await req.get(preApiUrl + searchUrl + keyword + '&type=' + type);
    searchLists.addAll(SearchDao.fromJson(res).data);
    this.isLoading = false;
  }

  @action
  void resetSearchList() {
    searchLists.clear();
  }
}

以上是完整代码，主要关注Description中的内容，创建完此文件后，运行注释中的三条命令，这些就会在该文件旁生成search.g.dart文件。

image.png

5. 生成后就可以调用了

final SearchStore store = SearchStore();

初始化store

在Widget build中加上Observer才能进行状态的动态监听

image.png

遇到的坑：当时在写项目的时候，遇到到这么一个问题，数组中的数据改变了，但是界面中始终不更新，最终在另一个开源项目中找到了答案，原来在mobx中定义数组不要使用List，而是使用ObservableList定义list

@observable
ObservableList searchLists = ObservableList();

这种数据改变后界面就会重新渲染了。

本人也是一个flutter新手，如果有其他问题，欢迎在评论中一起交流。