微信小程序申请,微信小程序客服

参考文章： 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界面也会实时更新。