微信小程序全局变量监听实现

直到文章发布的今天，微信小程序官方是没有提供解决方案的！！

这里的解决方案是: 对象代理 Proxy + 事件订阅和发布 vc-subscribe-publish;

结果

可以通过回调函数在任意组件或者页面中监听到globalData中的变化，并且拿到变化前后的两个值

前置工作

• 先安装第三方npm包（这是楼主发布的包，也可以选择其它的）, yarn add vc-subscribe-publish
• 小程序开发工具-构建npm

代码部分

1. 在app.js中

import PublishSubscribe from 'publish-subscribe-js'

 App({
  //生命周期钩子
  onLaunch() {
    this.tempValue = Object.assign({}, this.globalData);
    this.proxyData = this.watchGlobalData();
  },
  //全局变量
  globalData: {
    userInfo: {}  //例子： userInfo 需要被其它组件引用
  },
  //用于临时存放全局变量的较久数据
  tempValue: {},
  //将被初始化为对外提供修改接口的Proxy对象
  proxyData: null,

  /**
   * 说明： 对 globalData 进行代理，要修改globalData的值只能通过修改 proxyData来达成目的。
   *        而对proxyData的修改会影响到globalData,同时会触发事件的发布
   */
  watchGlobalData() {
    const app = this;
    return new Proxy(this.globalData, {
      get (target, property) {
        return target[property];
      },
      set (target, property, value) {
        target[property] = value;
        const oldValue = app.tempValue[property];
          PublishSubscribe.publish(property, {
            newValue: value,
            oldValue
          })
        app.tempValue[property] = value;
        return true
      }
    })
  },
})

2. 修改globalData

const app = getApp(); // getApp是小程序内置方法

//例子：对globalData（ProxyData）里的属性 userInfo 进行修改 
app.proxyData?.userInfo = {
  name: 'Vencent Lum',
  age: 25
}

3. 读取globalData

import PublishSubscribe from 'publish-subscribe-js'

Page({    //或Component
   data: {
     // 当订阅慢于消息发布时，此时 userInfo 已是最新数据
     dataSource: getApp().proxyData?.userInfo   //例子： 对 userInfo 进行监听
  },
   onLoad() {
     PublishSubscribe.subscribe('userInfo', ({
        newValue,
        oldValue
      }) => {
        this.setData({
          dataSource: newValue
        })
     })
   }
})