EventBus & VUEX & EventHub

1. eventbus原理是什么

事件总线，组件共同的事件中心，组件都可以上下平行的通知其他组件。
工作原理：发布（emit）订阅（on、one：仅订阅一次消息）模式，创建一个vue实例，通过空vue实例作为桥梁实现组件间的通信。不慎使用容易造成难以维护的灾难，需要结合vuex将通知的概念上升到共享状态层次。

function EventBusClass(){
	this.msgQueues = {}
}
EventBusClass.prototype = {
	//将消息保存到当前消息队列中
	on:function(msgName,func){
		if(this.msgQueues.hasOwnProperty(msgName)){//存在于消息队列中
			if(typeof this.msgQueues === 'function'){
				this.msgQueues[msgName] = [this.msgQueues[msgName], func]               
	            } else {
	                this.msgQueues[msgName] = [...this.msgQueues[msgName], func]    
	            }
		}else{//不在消息队列中
			this.msgQueues[msgName] = func
		}
	}
	// 消息队列中仅保存一个消息
    one: function(msgName, func) {
        // 无需检查msgName是否存在
        this.msgQueues[msgName] = func;
    },
    // 发送消息
    emit: function(msgName, msg) {
        if (!this.msgQueues.hasOwnProperty(msgName)) {
            return
        }
        if (typeof this.msgQueues[msgName] === 'function') {
            this.msgQueues[msgName](msg)
        } else {
            this.msgQueues[msgName].map((fn) => {
                fn(msg)
            })
        }
    },
    // 移除消息
    off: function(msgName) {
        if (!this.msgQueues.hasOwnProperty(msgName)) {
            return
        }
        delete this.msgQueues[msgName]
    }
}

2. EventHub 同EventBus
3. vuex有哪几种状态和属性?vuex的流程，click

适用于：兄弟组件之间有大量通信的，不管大项目还是小项目。

出现原因：遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏: 1.多个视图依赖于同一状态。 2.来自不同视图的行为需要变更同一状态。对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

vuex是专为vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。（EventBus是事件总线，是组件共同的事件中心，vuex是状态中心）

五种状态和属性：state、getters、mutations、actions（action提交mutation，而不是直接变更状态，action可以包含任意异步操作）、modules

方法：$store.state访问state中状态 / …mapState([‘aa’,‘bb’])
$store.getters访问getter中的方法 / …mapGetters([‘function1’,‘function2’])，经常在计算属性中被使用
dispatch，异步操作，用于调用actions中的方法 / …mapDispatch([‘sdff’,‘fsrf’])
$store. commit，同步操作，用于调用mutations中的方法 / …mapMutations[(‘aac’])

流程：页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对于的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值