全局监听globalData的某个属性变化

前言

近日在开发微信小程序的时候，要将globalData中某个属性的变化要同步到某个页面中。

使用Object.defineProperty()监听属性全局更改

经过上网查询相关资料，参考vue实现数据双向绑定原理：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

1️⃣ 在app.js中添加以下代码

//app.js
App({
	onLaunch: function() {},
	onShow: function() {},
	onHide: function() {
		// wx.stopLocationUpdate()
	},
	watch: function(key, method) {
		var obj = this.globalData;
		//加个前缀生成隐藏变量，防止死循环发生
		let ori = obj[key]; //obj[key]这个不能放在Object.defineProperty里
		if (ori) { //处理已经声明的变量，绑定处理
			method(ori);
		}
		Object.defineProperty(obj, key, {
			configurable: true,
			enumerable: true,
			set: function(value) {
				this['_' + key] = value;
				console.log('是否会被执行2')
				method(value);
			},
			get: function() {
				// 在其他界面调用key值的时候，这里就会执行。
				if (typeof this['_' + key] == 'undefined') {
					if (ori) {
						//这里读取数据的时候隐藏变量和 globalData设置不一样，所以要做同步处理
						this['_' + key] = ori;
						return ori;
					} else {
						return undefined;
					}
				} else {
					return this['_' + key];
				}
			}
		})
	},
	globalData: {
		count:0
	},
})

2️⃣ 在page.js中添加以下代码

const app=getApp();
Page({
	/**
	 * 页面的初始数据
	 */
	data: {
		count:0
	},
	// 
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function(options) {
		app.watch('count',(v)=>{
			that.setData({
				count:v
			})
		})
	},
})

总结

🎉🎉🎉在这里，代码就已经写完了，重复修改全局中的count属性，某个page页面中的监测这个属性的方法也会执行。
重温了Object.defineProperty方法。nice!!!❤️❤️❤️❤️❤️💯

转载自：小鱼的博客