深入Vuex 原理(下)
点击箭头处“蓝色字”，关注我们哦！！
孔维国，2016年加入去哪儿网技术团队。目前在大住宿事业部/增值业务研发中心，参与开发了TMC、CRM、QTA、Auth等项目，负责node框架nomi的设计以及开发。乐于探索布道新技术，在大前端的道路上越走越偏！在node领域上越陷越深！
前言
在深入Vuex原理(上)中，我们回答了 “Vuex 的 Store 是如何注入到组件中的？” 的问题，下面我们继续对以下问题进行探讨。 Vuex 的 state 和 getter 是如何映射到各个组件实例中自动更新的？ 首先，我们对问题进行简单剖析。
注：本篇文章只展示关键核心代码，一来由于篇幅原因，二来展示核心代码更容易让人理解。再者，本篇属于 Vuex 高级篇，对于本篇章中涉及的 Vue 相关的机制以及 Vuex 的高级使用等不进行过多赘述，请自行前往官网查看。
准备
疑问：Vuex 的state 和 getter 是如何映射到各个组件实例中自动更新的呢？
问题剖析
该问题的核心问题是当 Store 中的 state 和 getter 方式变更时，Vuex 如何保证各个组件实例中的数据自动更新，并 update 组件？简言之，某一组件 Store 更新时，如何通知其他组件进行数据更新，和 UI 更新。通过简单分析可知，问题的根本就是组件通信的问题。
浅谈组件通信
从分析可知，要解答本篇疑问，我们需要从 Vue 组件通信谈起。在使用 Vue 的过程中，需要频繁的进行组件间通信，通信的主体之间的关系可以是父子组件，也可以是类似兄弟组件或者是无关组件等非父子组件。总的来说有如下几种方式：
1.通过 props 向子组件传递数据：父->子；
2.通过事件向父组件发送消息：子->父，使用 $emit 发送事件；
3.父链和子索引：this.$parent 与 this.$children；
4.依赖注入：provide 和 inject；
5.子组件引用：ref与$refs；
6.特性绑定：v-bind="$attrs" 和 v-on="$listeners"；
7.vent bus；
8.$dispatch 和 $broadcast：在 Vue1 中使用；
9.利用全局变量 storage、cookie、query、hash 等传递数据: 非 Vue 特性，不做赘述；
10.全局事件广播。
下图展示了上述方案1~6的组件通信方式。
由于方案8官方已经不建议在 Vue2 中使用，此处不做赘述；而方案9~10不属于 Vue 特性，而是前端通用的数据通信方案，此处也不进行赘述，如有其它方案，欢迎补充。 下面，我们主要介绍一下与本文内容息息相关的方案7，中央事件总线的解决方案。其核心设计思想是引入中央通信桥梁——中央事件总线，使各个组件只与其进行通信，达到数据同步的通信目的。如下图 组件 A 数据变更，通知中央事件总线，其他组件监听并接收变更的数据。
下面代码展示了在 Vue 中使用中央事件总线进行组件通信：
let bus = new Vue({
methods: {
emit (event, ...args) {
this.$emit(event, ...args);
},
on (event, callback) {
this.$on(event, callback);
}
}
});
//component A
bus.emit('updateData', data); // 发送数据给 bus。
//component B
bus.on('updateData', data => {
// 接收 updateData事件 发送的数据信息。
})
Vue 的中央事件总线的实现简单讲就是新建了一个 Vue 对象，借助 Vue 对象的特性($emit 与 $on)作为其他组件的通信桥梁，实现组件间的通信以及数据共享。
探秘原理
本部分将针对以上疑问，通过源码分析，剖析核心代码，对问题进行解答。
使用
我们探讨的是 state 和 getter，首先我们先来看一下在 Vue 组件中如何方便的获取 Vuex 的 state 和 getter 吧。
this.$store.state.xxx;
this.$store.state.moduleA.xxx;
this.$store.getters.xxx;
this.$store.getters.moduleA.xxx;
正如我们所知的，Vuex 的 Store 会划分出 state 和 getters 两个数据区。getter 是从 store 的 state 中派生出的状态。代码如下：
// 初始化store时，划分出 state数据区 与 getters数据区
new Vuex.Store({state, getters});
源码分析
首先，我们先来看 state。从源码中我们找到了 state 的 get 方法，如下：
get state () {
return this._vm._data.$$state
}
从源码得知，在 Vue 组件中,使用 this.$store.getters.xxx 获取 xxx 属性时，实际上是获取的 store._vm.data.$$state 对象上的同名属性。那么我们将关注点放在 _vm 上。我们通过 Store 的 constructor 找到了处理 state 和 getter 的核心函数 resetStoreVM(this, state)。其核心代码如下：
store._vm = new Vue({
data: {
$$state: state
}
})
上述代码初始化了一个 Vue 实例 _vm，由于 Vue 的 data 是响应式的，所以，$$state 也是响应式的，那么当我们在一个组件实例中对 state.xxx 进行 更新时，基于 Vue 的 data 的响应式机制，所有相关组件的 state.xxx 的值都会自动更新，UI 自然也会自动更新！可见，这和 Vue 的中央事件总线 设计思想如出一辙，同样借助 Vue 对象特性(响应式的data)作为其他组件的通信桥梁，实现组件间的通信 以及数据共享。
总结
Vuex 的 state 是借助 Vue 的响应式 data 实现的。设计思想与 Vue 中央事件总线如出一辙。
猜测
Vue 中 computed 从 data 中派生出的计算属性，Vuex 中 getter 是从 state 中派生出的属性；而 Vuex 中的 state 是借助 data 实现的，那么 getter 是否是借助 computed 实现的呢？
源码验证
在 resetStoreVM 中可以看到对于 wrappedGetters(经过包装，收集的 getters，处理细节忽略)的处理。
const computed = {};
// 处理getters
forEachValue(wrappedGetters, (fn, key) => {
computed[key] = () => fn(store) // 将getter存储在computed上
//this.$store.getters.XXX的时候获取的是store._vm.XXX
Object.defineProperty(store.getters, key, {
get: () => store._vm[key],
enumerable: true
})
})
上述代码，对 wrappedGetters 进行处理，让 getter 存储至 computed 对象上，下面我们关注后续 computed 的处理即可。
store._vm = new Vue({
computed
})
上述代码将 computed 对象挂载至 Vue 实例 _vm 的 computed 属性上，得益于 Vue 的计算属性特性，数据的变更同样可以同步至其他相关组件上。这与我们的猜测一致。getter 的实现借助了 Vue 的 computed 的特性而实现。 分析至此，我们已经得出该问题的答案。
结论
1.Vuex 的 state 是借助 Vue 的响应式 data 实现的。
2.getter 是借助 Vue 的计算属性 computed 特性实现的。
3.其设计思想与 Vue 中央事件总线如出一辙。
更多 Vuex 原理探究,请前往深入Vuex原理(上)。