what

• 名字很长很绕靠口，总的来说，本文是对开辟小顺序过程当中运用mobx的一个总结。

• 状况治理，比拟人人也很熟悉，望文生义，是对前端页面繁复的状况举行治理，在此，我也不过量赘述。

• 所以虽然是是用在小顺序上，不过我想关于WebApp的状况治理，也有这么一丢丢启示。

why

• 为何要举行状况治理？
  如今的小顺序俨然是Hybrid App，又像是PWA，但固然也是一个WebApp，更不用说他的语法和vue稍微有这么一丢丢类似。有react和vue的实践在前，所以关于小顺序上那么多的页面状况和数据缓存，必将也要引入一个状况治理工具

• 为何是mobx
  轻易，快速，进修成本低，固然也是仁者见仁智者见智

how

1. 在小顺序中引入mobx
   在这里我运用了wechat-weapp-mobx这个库。在./libs目次下放入mobx.js和observer.js这两个库，同时在./store目次下新建store.js用于寄存全局状况。

2. 竖立store
   由于小顺序中不支撑@decorate装潢器，所以采用了extendObservable的写法。别的，小顺序支撑import语法和require语法。我比较喜好import语法，你们呢？我以为在action中不应写入庞杂逻辑代码，坚持简洁性和可复用性，你们怎么看

   // 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. 全局引入store
   尽人皆知，运用mobx的store要运用new store(),假如我们想全局挪用，必将不可能在每一个页面都new一个sotre，由于如许的话每一个页面的store都是一个全新的store。在这里，我在app.js里引入store，并挂载在全局变量globalData下。别的，小顺序中不支撑途径的省略。

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

4. 在pages里挪用全局的store
   能够同时运用内置的data举行双向绑定哦

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

5. 在页面中挪用store

   <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. 更新多个页面的store
   题目来了，这个时刻，多个页面的store照样自力的，怎样悉数更新呢？答案就是在onShow和onHide或许onUnload这三个性命周期函数中跟新全局的store

   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. store和localStorage的长效存储
   考虑到收集另有顺序崩溃的题目，我将store存储在localStorage中以便恢复，我在index.js的onLoad中挪用get storage，在onHide中set storage。由于toJS要领返回了一个不支撑[Symbol.iterator]()的对象，所以在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

讲点其他

• 本项目标示例小顺序地点weapp-bmscore，迎接列位老铁点个关注666