小程序监听全局变量数组的问题

记录在小程序项目实现的时候出现的小问题:

在其他组件中如何监听到全局变量为数组的改变,而作出回调。使用场景为:在商品详情页面添加商品至全局变量数组里,而购物车组件需要监听到这个全局变量的更改,做出回调。

想到的思路:主动回调、使用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方法

只能采取主动回调的方法实现了

posted @ 2020-03-28 16:30  renhaooh  阅读(1402)  评论(1编辑  收藏  举报