参考文章： https://www.cnblogs.com/BestMePeng/p/xcx_watch_globaldata.html

前言

由于项目上线在即，发现了项目设计上的缺陷。项目的所有公用数据都存放在globalData中，想据此实现一个类似Vuex的状态管理程序。由于小程序的页面渲染需要手动触发，因此可以考虑实现一个对globalData的监听程序。

代码

在app.js中

watchCallBack: {},
  watchingKeys: [],
  setGlobalData(data){
    // 为了便于管理，应通过此方法修改全局变量
    Object.keys(data).map(key => {
      this.globalData[key] = data[key]
    })
    console.log('mutation', data);
    wx.setStorageSync('store', this.globalData)// 加入缓存
  },
  
  $watch(key, cb){
    this.watchCallBack = Object.assign({}, this.watchCallBack,{
      [key]: this.watchCallBack[key] || []
    });
    this.watchCallBack[key].push(cb);
    if(!this.watchingKeys.find(x => x === key)){
      const that = this;
      this.watchingKeys.push(key);
      let val = this.globalData[key];
      Object.defineProperty(this.globalData, key, {
        configurable: true,
        enumerable: true,
        set(value){
          const old = that.globalData[key];
          val = value;
          that.watchCallBack[key].map(func => func(value, old));
        },
        get(){
          return val
        }
      })
    }
  }

在其他界面，如购物车cart

  onLoad: function(options) {
    //先计算一下页面中与globalData相关的属性，然后添加监听函数
    let computed = this.computed();
    this.setData(computed); // 重新渲染页面

    app.$watch('shop', (val, old) => {
      let computed = this.computed();
      this.setData(computed);
    })
  },

因为cart界面的一些数据依赖于globalData中的shop，因此只需要在cart页面的onLoad生命周期中注册监听函数即可，这样不管在其他哪个界面修改了shop中相应的数据，cart界面也会实时更新。