基于Mobx的多页面小顺序的全局同享状况治理实践

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

   
// 挪用observable data
{{item.id}}:{{item.name}}

{{props.sotre.count}} // 挪用computed data


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