1.前言

微信小程序很多地方很像Vue和React，然而小程序本身没有提供一个类似Vuex或Redux的全局状态管理工具。虽然有app.globalData在那儿杵着，但是app.globalData并不是响应式的。也就是说app.globalData的变化并不能驱动页面，然而Page和Component中的data和properties是可以驱动页面的，所以我想能不能以某种方式将app.globalData和data或properties联动起来。

具体想要达到的效果是： 将特定Page或者Component中的data联动到app.globalData中的值上，当app.globalData中的数据有变化的同时，改变data中的值。

正好最近正在学习mvvm的源码实现，看到一篇很好的帖子，就想着能不能将这片文章的思路用在小程序上。这里是传送门，特别感谢作者的分享。

2.场景示例

假设我的小程序有一个页面index，两个组件分别为childA和childB。它们之间的嵌套关系如下：

现在想要实现的效果是，在index中定义一个数据字段indexData，以属性传值的形式依次向子组件childA和二级子组件childB传递，并且这个值在index、childA和childB的页面上都有显示。而当indexData有所改变时，所有页面也都能够响应。

这个功能很简单，熟悉组件间传值的看官们很轻松就可以实现。

// index.js
Page({
  data: {
    indexData: '默认值'
  },
  onLoad: function () {
    setTimeout(() => {
        this.setData({
            indexData: '修改后的值'
        })
    }, 3000)
  }
})

<!--index.wxml-->
<view class="container">
  <childA class="childA" childaProp='{{indexData}}'></childA>
  <view class="usermotto">{{indexData}}</view>
</view>

首先在index.js声明数据字段indexData，在模板中传递给组件childA的childaProp属性。

// childA.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    childaProp: {
      type: String,
      value: ''
    }
  }
})

<!--childA.wxml-->
<view>我在childA：{{childaProp}}</view>
<childB class="childB" childbProp='{{childaProp}}'></childB>

在childA.js中声明属性childaProp，并在模板中传递给组件B的childbProp属性。

// childB.js
const app = getApp()

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    childbProp: {
      type: String,
      value: ''
    }
  }
})

<!--childB.wxml-->
<view>我在childB：{{childbProp}}</view>

这样当index在3s后改变indexData时，childaProp和childbProp都可以响应到，并驱动页面的变化。

然而现在需求出现了变化，我们需要在“最孙子”的组件childB中改变childbProp，并且希望childbProp变化后，他爹和他爷爷的值也能变。或者干脆希望当组件childB变化时，跟他没啥联系的兄弟组件（比如起名叫childC）中的值也能响应。

挨个trigger的话太惨了，熟悉全局状态管理的看官一下子就可以想到：哎？这不就是需要Vuex的时候吗？

引用Vue官网的Vuex概述里的原话：

但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是 Flux 架构就像眼镜：您自会知道什么时候需要它。

同志们。。。是到了这个时候了，可是微信小程序并没有一个Flux解决方案。

3.对app.js进行二次开发

下面就是通过对app.globalData这个对象进行数据劫持的过程了，并且通过发布订阅的模式更新所有订阅的数据。这里完全借鉴了开头提到的那篇mvvm原理的文章，区别在于mvvm原理是在模板编译的时候订阅所有需要进行数据绑定的dom节点，而这里是订阅了所有需要绑定的data或者properties。也就是说，人家是data变化的时候，dom随着变；这里是app.globalData变的时候，所指定的data跟着变。

换汤不换药~

首先是数据劫持

App({
  onLaunch: function () {
    //...此处省略很多自己生成的代码
    this.observe(this.globalData.wxMinix)
  },
  Observe: function (data) {
    let _this = this
    for (let key in data) {
      let val = data[key]
      this.observe(data[key])
      let dep = new Dep()
      Object.defineProperty(data, key, {
        configurable: true,
        get() {
          return val
        },
        set(newValue) {
          if (val === newValue) {
            return
          }
          console.log('newValue', newValue)
          val = newValue
          _this.observe(newValue)
        }
      })
    }
  },
  observe: function (data) {
    if (!data || typeof data !== 'object') return   
    this.Observe(data)
  },
  globalData: {
    wxMinix: {
      indexData: ''
    }
  }
})

在globalData这个对象中自定义一个wxMinix属性，我们所劫持的就是这个属性所对应的对象，这样做的目的是职责分离，globalData中的其它属性我们并不做劫持，仍然可以当做普通的app.globalData进行使用。

我们遍历app.globalData.wxMinix中的每一个key，通过Object.defineProperty方法重写他们的访问器属性，当这个属性值仍然是对象的时候，我们重复上述操作，直到把每一个key都劫持到。相当于在这个属性取值或赋值的时候，拉出两个线头，在这两个时间点做我们想做的事情。

此时在小程序的任意一个地方给app.globalData.wxMinix.indexData赋值，都可以在控制台打印出'newVlaue+新的值'。

之后是发布订阅

原贴的作者中讲解了啥是发布订阅，订阅其实就是把要干的事（回调函数）添加进数组，发布就是依次执行他们。这里我们要做的事情就是：订阅我们想要跟app.globalData.wxMinix.indexData绑定的data或者properties，然后监听app.globalData.wxMinix.indexData，他一变，立马通知所有订阅在册的data或者properties，让他们也跟着变。


// 在app.js的全局作用域定义观察者和订阅列表
function Watcher(key, gd, fn) {
  this.key = key
  this.gd = gd
  this.fn = fn

  Dep.target = this
  let arr = key.split('.')
  let val = this.gd
  arr.forEach(key => {
    val = val[key]
  })
  Dep.target = undefined
}

Watcher.prototype.update = function () {
  let arr = this.key.split('.')
  let val = this.gd
  console.log(this.gd)
  arr.forEach(key => {
    val = val[key]
  })
  this.fn(val)
}

function Dep() {
  this.subs = []
}

Dep.prototype = {
  addSubs(watcher) {
    this.subs.push(watcher)
  },
  notify() {
    this.subs.forEach(watcher => {
      watcher.update()
    })
  }
}

// 修改数据劫持中的代码
Observe: function (data) {
    let _this = this
    for (let key in data) {
      let val = data[key]
      this.observe(data[key])
      let dep = new Dep()   //Dep的实例可在set和get中闭包访问
                            //也就是说每个key都有对应的要通知的观察列表
      Object.defineProperty(data, key, {
        configurable: true,
        get() {
          Dep.target && dep.addSubs(Dep.target)     //获取app.globalData.wxMinix对应的值时进行订阅
          return val
        },
        set(newValue) {
          if (val === newValue) {
            return
          }
          console.log('newValue', newValue)
          val = newValue
          _this.observe(newValue)
          dep.notify()      // 当app.globalData.wxMinix对应的值变化时发布
        }
      })
    }
  }

这里主要是先维护了一个Dep类型的构造函数，只有一个数组属性，在它的原型链上有两个方法，一个是addSubs（订阅），一个是notify（发布）。

globalData: {
    wxMinix: {
      indexData: ''
    }
},
makeWatcher: function (key, gb, fn) {
    new Watcher(key, gb, fn)
}

最后是实例化观察者，订阅进去就欧了~

最后我们在App.js的构造器中再添加一个方法，方便外部的页面和组件随时调用。这时我们的app.js的功能就添加完毕了，只需要在想要的地方调用app.makeWatcher就可以了。

比如：我希望index.js中的indexData和app.globalData.wxMinix.indexData绑定，那么我只要在index.js的onLoad生命周期中订阅这个观察者就可以了。

onLoad: function () {
    let _this = this
    app.makeWatcher('wxMinix.indexData', app.globalData, function(newValue) {
        _this.setData({
            indexData: newValue
        })
    })
  }

这时，如果在childB.js中修改childbProp的值：

lifetimes: {
    attached: function () {
      let _this = this
      // 在组件实例进入页面节点树时执行
      setTimeout(() => {
        app.globalData.wxMinix.indexData = '从childB中修改后的值'
        console.log(app.globalData.indexData)
      }, 5000)
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },

这时你会发现index.js中的indexData也改变了~，如果你想在任意组件绑定数据，只需要在那个页面或者组件的onLoad生命周期中订阅一个观察者，在回调函数中修改这个值就好。

注意

到这里开发工作基本就完成了，还有两点需要注意：

想监测的app.globalData.wxMinix中的数据必须事先声明在globalData对象中，因为在onLaunch中做数据劫持的时候，只会把当时有的所有key劫持住，把他们的get和set方法拉出线头儿来~（ps：虽然貌似本身app.globalData中的数据不事先声明在小程序里也访问不到）
如果indexData本身也是一个对象，只想改变他其中一个属性值也是可以的，但是需要在特定的页面data或properties中声明一个对应的值，在makeWatcher的时候修改这个值就可以。或者可以在修改app.globalData.wxMinix.indexData时，将indexData深拷贝出来，修改其中一个属性值后，将新的indexData整个赋值上去。比如：

    let temp = JSON.parse(JSON.stringify(app.globalData.wxMinix.indexData))
    temp.name = '哈哈哈'
    app.globalData.wxMinix.indexData = temp

浅拷贝是行不通的�-_-||。

4.后记

写了半天感觉好累啊，希望能帮到有需要的看官，如果有漏洞或者更好的方法也欢迎大家指正。其实小程序组件自带的relations貌似也能实现类似的功能，但是有些太过麻烦。还是需要继续研究。

感觉发布订阅写得比较模糊，如果没看懂的看官可以直接传送门，里面讲得很清楚，我也会继续修改本文。

---------------------------------分割线--------------------------------------

把上述代码进行了一下模块化的封装，而且写了一下使用文档。同志们可以在自己的小程序中试一下~ 传送门