微信小程序页面中监听globalData数据变化

小白变怪兽2026-01-06 9:23

问题：微信小程序app.ts中声明了id变量，如何在pages/index.ts中监听id值变化了

在 app.ts 增加全局 id 变更订阅机制

csharp 复制代码

App({
	globalData: {
    id: '',
  },
  setId(id: string) {
    this.globalData.id = id
    const list = idListeners.slice()
    for (let i = 0; i < list.length; i++) {
      list[i](id)
    }
  },
  onIdChange(cb: (id: string) => void) {
    idListeners.push(cb)
  },
  offIdChange(cb: (id: string) => void) {
    const i = idListeners.indexOf(cb)
    if (i > -1) idListeners.splice(i, 1)
  }
})

在 index 页面注册监听并同步组件数据

csharp 复制代码

lifetimes: {
    attached() {
      const fn = (id: string) => {
        console.log('id change')
        this.setData({ id })
      }
      ;(this as any)._idListener = fn
      app.onIdChange(fn)
      this.setData({ id: app.globalData.id })
    },
    detached() {
      const fn = (this as any)._idListener
      if (fn) app.offIdChange(fn)
    }
  }

验证：

添加事件handleChangeId() { const id = Math.random() * 1000; app.setId(id.toString()) },

触发handleChangeId事件，控制台此时就会打印console.log('id change')