为何咱们须要 Vuex

1、一个错误引起的思考

在 Weex 子组件中经过 this.$parent.$emit('event') 触发父组件的事件，父组件经过 this.$on('event', handler) 接收事件，从而实现父子组件的通讯。这在 Native 端表现正常，然而当使用 Vue-loader 编译代码，引入 vue-runtime 和 weex-vue-render 在浏览器端运行的时候，事件没法正常捕获，这是什么缘由呢？

假设把前文所说的父组件命名为 father, 子组件命名为 child，起初, Weex 中:

child.$parent === father // true复制代码

咱们为了通知 father 去作某件事情，能够在 child 中使用 this.$parent.$emit，但是当解析到浏览器执行的时候，Debugger 发现：

child.$parent === father // false
    child.$parent.$parent === father // false复制代码

也就是在 father 和 child 之间，多了一层组件的封装，以前的父子关系发生了改变，事件天然没法正常传达

这是由于，在 Weex 中有不少内建组件，底层基于 Native 端实现，当经过 vue-runtime 在浏览器运行的时候，须要将这些内建组件用基于浏览器的 Vue 组件代替，而这些 Vue 组件要实现相似底层 Native 组件的效果，极有可能须要封装多层，也就是会出现上述的父子关系变动的状况

能够认为是 Weex 作得很差的地方，可是我觉着，就算没有这个错误，也应该避免使用
this.$parent

2、this.$parent 背离了组件解耦的原则

上述的组件通讯方式，是从哪来的奇淫巧技，我都已忘记，目前在 Vue 官网上找不到这种使用方法，也就是连官方都不推荐了更印证了不该该使用 this.$parent 的说法。

其实缘由也很简单，子组件引用父组件的实例，这种强关联背离了组件的解耦原则，子组件依赖于某一特定的父组件，那么这个子组件只适用在这个父组件下，把这个子组件放到别处，就没法正常运行（或者有功能的缺失），而且一旦出现章节一中父子关系变动的状况，结果更加难以预料

那么子父组件确实是须要通讯的时候，不使用 this.$parent 有什么替代方案么？答案是有的，Vue 中有个 bus 总线，子组件经过 bus.$emit把事件发到总线中，任何组件均可以监听这个事件。也就是子组件只负责触发事件，并不须要关心具体的处理组件。总线接收到事件信号后，发送到监听了该事件的组件处理

对于父到子的通讯，父组件经过 props 向子组件传入参数，对于这个方向的数据流，咱们却不用太担忧的解耦的问题，由于父组件做为调用方只须要传递子组件须要的参数便可，子组件只须要关心参数，并不须要关心是谁在调用，一样能够顺利移植，完成解耦

从这个层面来讲，从某种意义上说，单向数据流促进了组件间的解耦

3、这一样能够解释为何咱们须要 Vuex

以这个角度来观察 Vuex 以及全部单向数据流状态控制框架，是否是某种意义上的事件总线呢？

bus.png

store.png

其实 Vuex 不过是 Bus 更高级细致的实现而已，连官方文档也说了，有必要好好思考下你是否真的须要 Vuex，若是你的应用自己不复杂，其实只须要一个简单的 Bus 就够了

公众号：菲麦前端