zoukankan      html  css  js  c++  java
  • 小程序监听全局变量数组的问题

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

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

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

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

  • 相关阅读:
    acwing2-01背包问题
    背包问题(转载)
    考研易错点 二叉树的度和图的度
    考研易错点*s++
    考研复习易错点数组指针和指针数组
    Android Crash Learning
    Mysql5.7中的分组排序
    康师傅JVM:StringTable(十三)
    RocketMQ集群搭建
    RocketMq的单机安装
  • 原文地址:https://www.cnblogs.com/renhaooh/p/12588007.html
Copyright © 2011-2022 走看看