Using mobx in fluent

Time:2021-8-7

Movie playback software written by fluent:https://github.com/Mockingbird1234/skapp

Open source is not easy. Give it to star if you are interested.

What is mobx?

If you know more about Vue or react, you must have heard of vuex or redux. They are both state management tools. Mobx also belongs to state management tools. Its use method is simpler than redux. There are not so many rules. Just remember one thing: if you use the variable defined by @ observable, you must use @ action to modify its value, Only in this way can the state be managed uniformly.

Some concepts in mobx will not be introduced here. The following mainly introduces my own fluent projectskappHow to use mobx in.

Using mobx in fluent

1. First install the dart package of mobx, and thenpubspec.yamlIn filedependenciesAdd the following code to the field:

Using mobx in fluent

Two plug-ins are installed here. The version is mainly the latest version of the official website

  1. staypubspec.yamlIn filedev_dependenciesInstall two additional plug-ins:

Using mobx in fluent

These two plug-ins are used for mobx code generation

  1. staylibCreate under directorystoreDirectory is used to store mobx state variables

Using mobx in fluent

This is the structure used in my project. The structure varies from person to person

  1. withsearch.dartTake as an example to introduce the use method,
/*
 * Created: 2020-04-07 15:55:59
 * Author : Mockingbird
 * Email : [email protected]
 * -----
 * Description:
              1. Execute the command: fluent packages pub run build_ runner build
              2. Regenerate after deleting: fluent packages pub run build_ runner build --delete-conflicting-outputs
              3. Real time update. G file: fluent 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';

///Must be used to generate. G files
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();
  }
}

The above is the complete code, mainly focusing on the content in description. After creating this file, run the three commands in the comments, and these will be generated next to the filesearch.g.dartFile.
Using mobx in fluent

  1. After generation, it can be called
final SearchStore store = SearchStore();

Initialize store

stayWidget buildAddObserverTo dynamically monitor the status

Using mobx in fluent

Pit encountered: when I was writing the project, I encountered a problem that the data in the array changed, but the interface was never updated. Finally, I found the answer in another open source project. The original definition of array in mobx did not use list, but used observablelist to define list

@observable
ObservableList searchLists = ObservableList();

When this data changes, the interface will be re rendered.

I am also a novice of fluent. If you have any other questions, please share them in the comments.