当前位置：首页 > news >正文

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

news 来源：原创 2024/4/20 19:04:31

what

名字很长很绕靠口，总的来说，本文是对开发小程序过程中使用mobx的一个总结。
状态管理，相比大家也很熟悉，顾名思义，是对前端页面繁复的状态进行管理，在此，我也不过多赘述。
所以虽然是是用在小程序上，不过我想对于WebApp的状态管理，也有这么一丢丢启发。

why

为什么要进行状态管理？
现在的小程序俨然是Hybrid App，又像是PWA，但当然也是一个WebApp，更不用说他的语法和vue略微有这么一丢丢相似。有react和vue的实践在前，所以对于小程序上那么多的页面状态和数据缓存，势必也要引入一个状态管理工具
为什么是mobx
方便，快捷，学习成本低，当然也是仁者见仁智者见智

how

在小程序中引入mobx
在这里我使用了wechat-weapp-mobx这个库。在./libs目录下放入mobx.js和observer.js这两个库，同时在./store目录下新建store.js用于存放全局状态。

建立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;

全局引入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()
  }
}))
```

在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
  },
}))

在页面中调用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>

更新多个页面的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;
},

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