what

• The name is very long and interesting. In general, this article is a summary of the use of mobx in the development of small programs.

• State management, as the name implies, is the management of the complex state of front-end pages. Here, I will not dwell on it.

• So although it's used in small programs, I think it's also a loss of inspiration for WebApp's state management.

why

• Why state management?
  Hybrid App, like PWA, is now a small program, but it is also a WebApp, not to mention that its grammar is slightly similar to vue. There are react and Vue practices ahead, so for so many page states and data caches on small programs, it is bound to introduce a state management tool.

• Why mobx
  Convenience, quickness, low cost of learning, of course, are also different opinions of people with different opinions and wisdom.

how

1. Introducing mobx into small programs
   I used it here. wechat-weapp-mobx This library. Place mobx.js and observer.js in the. / libs directory, and create a new store.js in the. / store directory to store the global state.

2. Create a store
   Because the @decorate decorator is not supported in the small program, the extension Observable is used. In addition, the applet supports import and require grammars. I prefer import grammar. What about you? I don't think complex logic code should be written in action to keep it concise and reusable. What do you think?

   // store.js
   // Introducing the necessary Libraries
   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;    //Call computed data here
       let id = len === 0 ? 1 : this.players[len - 1].id + 1;
       this.players.push(new player(name, id));
     }
   }
   
   export default store;
   

3. Global introduction of store
   It is well known that stores using mobx use new store(), and if we want to call it globally, it is impossible to have a new sotre on every page, because then every store on every page is a brand new store. Here, I introduce store in app.js and mount it under the global variable globalData. In addition, omitting paths is not supported in small programs.

   //app.js
   const observer = require('./libs/observer').observer;
   import store from './stores/index';  // Omission calls are not supported in applets
   
   App(observer({
     onLaunch: function () {
     },
     globalData: {
       store: new store()
     }
   }))

4. Call the global store in pages
   You can use built-in data for two-way binding at the same time.

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

5. Call store on the page

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

6. Update store s on multiple pages
   The question arises. At this time, the stores of multiple pages are still independent. How to update them all? The answer is to follow the new global store in three life cycle functions, onShow and onHide or onUnload.

   onShow: function() {    // Update this page store when displaying
     this.props.store = app.globalData.store
   },
   onHide: function() {   // Update global store when hiding
     app.globalData.store = this.props.store;
   },
   onUnload: function() {    // Update global store when page skip returns
     app.globalData.store = this.props.store;
   },

7. Long-term Storage of store and localStorage
   Considering the problem of program crash in the network, I store the store in the local Storage for recovery. I call get storage in the onLoad of index.js and set storage in the onHide. Since the toJS method returns an object that does not support [Symbol.iterator] (), the following settings are made in the store

   // 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;
     }

others

Talk about something else

• Sample applet address for this project weapp-bmscore Welcome all of you to pay attention to 666