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

what

  • 名字很长很绕靠口,总的来说,本文是对开发小程序过程中使用mobx的一个总结。

  • 状态管理,相比大家也很熟悉,顾名思义,是对前端页面繁复的状态进行管理,在此,我也不过多赘述。

  • 所以虽然是是用在小程序上,不过我想对于WebApp的状态管理,也有这么一丢丢启发。

why

  • 为什么要进行状态管理?
    现在的小程序俨然是Hybrid App,又像是PWA,但当然也是一个WebApp,更不用说他的语法和vue略微有这么一丢丢相似。有reactvue的实践在前,所以对于小程序上那么多的页面状态和数据缓存,势必也要引入一个状态管理工具

  • 为什么是mobx
    方便,快捷,学习成本低,当然也是仁者见仁智者见智

how

  1. 在小程序中引入mobx
    在这里我使用了wechat-weapp-mobx这个库。在./libs目录下放入mobx.jsobserver.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
    众所周知,使用mobxstore要使用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还是独立的,如何全部更新呢?答案就是在onShowonHide或者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.jsonLoad中调用get storage,在onHideset 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

    原文作者:laihaibo
    原文地址: https://segmentfault.com/a/1190000010372573
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞