Pratique de la gestion globale de l'état partagé des applets multipages basés sur Mobx

quelle

• Le nom est très long et proche de la bouche.En général, cet article est mobxun résumé de l'utilisation du processus de développement de petits programmes .

• La gestion des états est plus familière que tout le monde. Comme son nom l'indique, c'est pour gérer l'état compliqué du front-end. Je ne vais pas les répéter ici.

• Donc, bien qu'il soit utilisé dans de petits programmes, mais je pense WebAppqu'il y a une telle perte d'inspiration pour la gestion de l'État.

Pourquoi

• Pourquoi avez-vous besoin de gérer le statut?
  Le petit programme actuel est Hybrid Appsimilaire PWA, mais il en est aussi un WebApp, bien sûr il l'est aussi , sans oublier que sa syntaxe est vuelégèrement similaire à celle-ci. Il reactet vuepratique d' abord, donc pour autant de pages et le cache de données d'état sur un petit programme, mais aussi liés à l'introduction d'un outil de gestion de l' Etat

• Pourquoi Mobx est
  pratique, rapide et à faible coût d'apprentissage, bien sûr, le bienveillant voit le bienveillant

Comment

1. Introduisez mobx
   dans l' applet. Ici j'utilise la bibliothèque wechat-weapp-mobx . Dans ./libsdans le répertoire mobx.jset observer.jsles deux bibliothèques, alors que ./storesous le nouveau répertoire store.jspour le stockage de l' état global.

2. 
   Étant donné que le magasin ne prend pas en charge les @decoratedécorateurs dans le petit magasin , il extendObservableest écrit. De plus, l'applet prend en charge la importgrammaire et la requiregrammaire. Je préfère la importgrammaire, et vous? Je ne pense pas que actionvous devriez y écrire du code logique complexe, le garder concis et réutilisable, qu'en pensez-vous

   // store.js
   // 引入必须的库
   const mobx = require('../libs/mobx');
   const extendObservable = require('../libs/mobx').extendObservable;
   const computed = require('../libs/mobx').computed;
   const toJS = require('../libs/mobx').toJS;
   
   let store = function () {
     extendObservable(this, {
   
       // observable data
       players: [],
   
       // computed data
       get count() {
         return this.players.length;
       }
     });
   
     // action
     this.addPlayer = name => {
       let len = this.count;    //此处调用computed data
       let id = len === 0 ? 1 : this.players[len - 1].id + 1;
       this.players.push(new player(name, id));
     }
   }
   
   export default store;
   

3. magasin global d'introduction
   est bien connu que l'utilisation mobxde storevous voulez utiliser new store(), si l' on veut appeler l'impossible global lié à chaque page newun sotre, parce que chaque page storeest une marque nouvelle store. Ici, je l'ai app.jsprésenté storeet monté sous des variables globales globalData. De plus, l'omission de chemins n'est pas prise en charge dans les applets.

   //app.js
   const observer = require('./libs/observer').observer;
   import store from './stores/index';  // 小程序中不支持省略调用
   
   App(observer({
     onLaunch: function () {
     },
     globalData: {
       store: new store()
     }
   }))

4. L'appel du magasin global dans les pages
   peut utiliser la dataliaison bidirectionnelle intégrée en même temps.

   // index.js
   const observer = require('../../libs/observer').observer;
   
   let app = getApp();
   Page(observer({
     data: {
       mes: 'hello jim green'
     },
     props: {
       store: app.globalData.store
     },
   }))

5. Appeler le magasin dans la page

   <view class="players-list">
     <view class="players-item" wx:for="{{props.store.players}}" wx:key="{{item.id}}">    // 调用observable data
       <text class="players">{{item.id}}:{{item.name}}</text>
     </view>
     <view>{{props.sotre.count}}</view>    //  调用computed data
   </view>

6. Le
   problème de la mise à jour de plusieurs pages de la boutique arrive. Pour le moment, les pages multiples sont storetoujours indépendantes. Comment les mettre à jour toutes? La réponse est onShowet onHideou onUnloadles trois fonctions avec le cycle de vie d'un nouveau mondestore

   onShow: function() {    // 显示时更新本页面store
     this.props.store = app.globalData.store
   },
   onHide: function() {   // 隐藏时更新全局store
     app.globalData.store = this.props.store;
   },
   onUnload: function() {    // 页面跳转返回时更新全局store
     app.globalData.store = this.props.store;
   },

7. magasin localStorage et le stockage à long terme
   prise en compte également la question des accidents de réseau, je vais storeêtre stockés dans localStorageafin de récupérer, j'étais dans index.jsl' onLoadappel get storage, au onHidemilieu set storage. Étant donné que la toJSméthode a renvoyé un [Symbol.iterator]()objet non pris en charge , les paramètres suivants ont été définis dans le magasin

   // index.js
   onLoad: function () {
     let store = wx.getStorageSync('store');
     if(store) {
       this.props.store.formStorageToStore(store);
     }
   },
   onHide: function () {
     
     let store =this.props.store.currentStore;
     wx.setStorageSync('store', store)
   },
   
   // store.js
     get currentStore() {
       let {players,games,currentGame,hidden,filter} = toJS(this);
       return {players,games,currentGame,hidden,filter};
     }
     this.formStorageToStore = ({players,games,currentGame,hidden,filter}) => {
       this.players = players;
       this.games = games;
       this.currentGame = currentGame;
       this.hidden = hidden;
       this.filter = filter;
     }

autres

Dis moi quelque chose

• L'adresse de l'exemple d'applet pour ce projet est weapp-bmscore . Vous pouvez faire attention au 666