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; }
others
讲点其他
本项目的示例小程序地址weapp-bmscore,欢迎各位老铁点个关注666