java 状态机 eventbus,vue状态管理机制探究（eventBus vs VUEX）

最初了解到eventBus和vuex并不清楚其原理只知道无脑用,甚至有些时候用的时候还不是很清楚，最近比较好奇这两者的区别，特以此文梳理

eventBus

定义

又称事件总线，作为组件共同的事件中心

组件都可以上下平行的通知其他组件

工作原理

发布订阅模式

创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信

缺点

不太方便，若不慎使用会造成难以维护的灾难，所以才需要更完善的vuex作为状态管理中心，将通知的概念上升到共享状态层次

使用

初始化

方法一

// event-bus.js

import Vue from 'vue'

export const EventBus = new Vue()

复制代码

方法二

创建一个全局事件总线

// main.js

Vue.prototype.$EventBus = new Vue()

复制代码

可以维护一份公用数据或方法

export default new Vue({

data() {

return {

searchShow: true,

showBtn: true

}

},

methods: {

searchShowChange(value) {

if (typeof value === 'boolean') {

this.searchShow = false

} else {

this.searchShow = !this.searchShow

}

this.$emit('searchShowChange')

}

}

})

复制代码

$on/$emit/$off

$emit发送事件

$on接收事件

$off移除监听者

十分重要，如果不手动清除，会一直存在，反复进入到接受组件内操作获取数据原本只有一次的操作将会有多次

移除单个事件EventBus.$off('aMsg')

移除所有事件EventBus.$off()

beforeDestroy() {

//组件销毁前需要解绑事件。否则会出现重复触发事件的问题

this.bus.$off(this.$route.path);

}

复制代码

VUEX

产生背景

当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏: 1.多个视图依赖于同一状态。 2.来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

工作原理

运用到了js设计模式中的单例模式，单例模式想要做到的是，不管我们尝试去创建多少次，它都只给你返回第一次所创建的那唯一的一个实例。

在这种模式下