小程序实现多页面同时监听globalData值变化，实现小程序全局数据监听

小程序实现多页面同时监听globalData值变化，实现小程序全局数据监听

app.js 目录下

1.利用Object.defineProperty方法执行页面的回调函数
2.多页面同时监听 -> 例： 监听isLogin 则在watchMethods中开辟watchMethods.isLogin = [],然后存放监听的方法。当isLogin变化时遍历执行watchMethods.isLogin中所有的方法，即watchMethods.isLogin.map( item => item( xxx))

App({
  globalData: {
    isLogin: false,
  },
  watchMethods: {},
  watch(param) {
    const that = this
    const obj = this.globalData
    for(let key in param) {
      if(!this.watchMethods[key]){
        this.watchMethods[key] = []
      }
      const method = param[key]
      this.watchMethods[key].push(method)
      Object.defineProperty(obj, key, {
        set(val) {
          const methods = that.watchMethods[key]
          methods.map(item => item(val))
        }
      })
    }
  },

page/index/index.js目录

onLoad() {
    this.watch()
},
watch() {
    app.watch({
        isLogin(val){
            console.log('首页：'+val)
        }
    })
},

page/category目录

<!-- category.wxml -->
<wxs module="wxs" src="./data.wxs"></wxs>
<view class="main">品类页面</view>
<view class="main">{{wxs.color}}</view>
<button bindtap="doLogin">登陆</button>

//category.js
let app = getApp()
Page({
    onLoad() {
        this.watch()
    },
    doLogin() {
        app.globalData.isLogin = !app.globalData.isLogin
    },
    watch() {
        app.watch({
            isLogin(val){
                console.log('品类：'+val)
            }
        })
    },
})