参考文章: https://www.cnblogs.com/BestMePeng/p/xcx_watch_globaldata.html
前言
由于项目上线在即,发现了项目设计上的缺陷。项目的所有公用数据都存放在globalData
中,想据此实现一个类似Vuex
的状态管理程序。由于小程序的页面渲染需要手动触发,因此可以考虑实现一个对globalData
的监听程序。
代码
在app.js中
watchCallBack: {},
watchingKeys: [],
setGlobalData(data){
// 为了便于管理,应通过此方法修改全局变量
Object.keys(data).map(key => {
this.globalData[key] = data[key]
})
console.log('mutation', data);
wx.setStorageSync('store', this.globalData)// 加入缓存
},
$watch(key, cb){
this.watchCallBack = Object.assign({}, this.watchCallBack,{
[key]: this.watchCallBack[key] || []
});
this.watchCallBack[key].push(cb);
if(!this.watchingKeys.find(x => x === key)){
const that = this;
this.watchingKeys.push(key);
let val = this.globalData[key];
Object.defineProperty(this.globalData, key, {
configurable: true,
enumerable: true,
set(value){
const old = that.globalData[key];
val = value;
that.watchCallBack[key].map(func => func(value, old));
},
get(){
return val
}
})
}
}
在其他界面,如购物车cart
onLoad: function(options) {
//先计算一下页面中与globalData相关的属性,然后添加监听函数
let computed = this.computed();
this.setData(computed); // 重新渲染页面
app.$watch('shop', (val, old) => {
let computed = this.computed();
this.setData(computed);
})
},
因为cart
界面的一些数据依赖于globalData
中的shop
,因此只需要在cart页面的onLoad
生命周期中注册监听函数即可,这样不管在其他哪个界面修改了shop
中相应的数据,cart
界面也会实时更新。