小程序监听全局变量数组的问题
记录在小程序项目实现的时候出现的小问题:
在其他组件中如何监听到全局变量为数组的改变,而作出回调。使用场景为:在商品详情页面添加商品至全局变量数组里,而购物车组件需要监听到这个全局变量的更改,做出回调。
想到的思路:主动回调、使用watch函数监听全局变量(查询了下小程序官方提供的拓展computed好像不能监听全局属性,只好自行定义)
主动回调:
在需要回调的组件中,全局对象app添加回调函数。当回调函数的时候就会执行这里的函数
// 设置添加购物车回调函数 app.addCartCallBack = () => { this._getCartList() }
在修改全局变量的地方,执行回调函数
addCart(good) { const isHave = this.globalData.cartList.find(item => { return item.iid === good.iid }) if (isHave) { isHave.count++ } else { good.count = 1 good.check = false this.globalData.cartList.push(good) } // this.globalData.num = ["1"] console.log(this.globalData.num) if (this.addCartCallBack) { // 执行回调 this.addCartCallBack() } }
watch监听全局变量:
使用Object.defineProperty()方法,执行对象的 getter/setter方法来判断属性是否改变,如改变则执行回调
// 全局属性
globalData: {
num: []
},
// 定义watch函数监听全局属性 watch(method){ var obj = this.globalData Object.defineProperty(obj, 'num', { configurable: true, enumerable: true, set: function (value) { this._name = value;
// 执行传入参数的回调函数 method(value); }, get: function () { return this._name } }) }
然后,在回调的地方执行app.watch方法且传入回调函数
// 执行watch const watchCallBack = (value) => { console.log(value) } app.watch(watchCallBack)
最后发现watch只能监听已存在的属性,监听不了数组中的push、pop方法
只能采取主动回调的方法实现了