基于Mobx的多页面小程序的全局共享状态管理实践

Posted 2021-02-28 jlfw

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