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

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

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

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

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

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

猜你喜欢