Vuex和全局事件总线的区别

Vuex和全局事件总线的区别

我们知道通过全局事件总线的方法同样也能够实现任意组件间的通信，并且是依托于Vue的特性结合一些技巧实现的,并不需要第三方的支持，那么和全局事件总线相比Vuex和全局事件总线$bus的区别在哪里呢？我们下面来探讨一下：

总线和Vuex的共同点

组件能找到它们的原理如出一辙

Vuex状态管理是利用Store仓库进行管理，而事件总线是通过$bus绑定($on)和触发($emit)事件实现的。他们都使用了Vue 数据代理的这个重要的一个内置关系：VueComponent.prototype.__proto__ === Vue.prototype

我们来看看使用总线和使用状态管理的时候调用的的API就知道了

 /*--------事件总线-----------*/

// 事件总线绑定事件
this.$bus.$on('handleAdd',handleAdd)
// 事件总线触发事件
this.$bus.$emit('handleAdd',this.count)
 
/*--------状态管理-----------*/
// 获取状态
this.$store.state.count
// 修改状态
this.$store.dispatch('increment',this.count)
this.$store.commit('INCREMENT',this.count)

我们可以看到调用他们的方式都是再组件中使用this获取到他们，这里的this就是指向当前的实例化组件(VueComponent),于是我们就可以通过VueComponent.prototype.__proto__ === Vue.prototype这个内置关系知道数据最终是透过原型链找到的 b u s / s t o r e