项目中总是难免遇到事件击发与接收的情况，而Vue中提供的emit击发和on接收事件的方法又局限于父子组件的范围内。而对于兄弟组件之间，貌似网上查到的都是用另一个Vue对象来转发事件，用Vuex来传递数值。我在想是不是也可以通过Vuex来作为事件击发/转发的媒介。
话不多说，上代码：
Vuex中击发事件，储存事件，转发事件的方法：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
eventBus: []
},
getters: {
onEvent(state) {
return function (name) {
let index = state.eventBus.map((eb) = > {return eb.name}).indexOf(name);
if (state.eventBus.length > 0 && index >= 0) {
let result = Object.assign({}, state.eventBus[index]);
state.eventBus.splice(index, 1);
return result;
}
return null;
}
}
},
mutations: {
emitEvent(state, event) {
if (event && event.name) {
event.content = !event.content ? '' : event.content;
event.time = new Date().getTime();
state.eventBus.push(event);
}
}
}
})
对应vue组件中接收事件的代码：
export default {
name: 'app',
data: function () {
return {
showAlarmConfirm: false,
content: ''
}
},
computed: {
alertCont() {
return this.$store.getters.onEvent('alert');
}
},
watch: {
alertCont: function (a, b) {
if (a !== b && a) {
this.content = a.content;
this.showAlarmConfirm = true;
}
}
}
}
任何其他组件中，击发事件的方法：
this.$store.commit('emitEvent',{name:'alert',content:'test'});
p.s.在接收事件的vue组件中watch alertCont改变情况的回调函数里，有一个a!==b&&a的判断，这是因为在watch的时候，alertCont每次改变，会引发对应watch回调函数执行两次，第一次是alertCont从null变为正常值（a为正常值，b为null），第二次alertCont的值没有改变（a，b都是正常值），之后会又第三次执行回调，这时（a为null，b为正常值），为了将这种情况过滤到只执行一次，于是加了这样的判断。
个人推测第二次执行回调时，是Vue框架内部的赋值机制所导致的。
如果有什么想法，欢迎留言讨论
2018-01-22：
这种方法只是组件间的值传递，在接收数据的位置使用了相对麻烦的watch监听computed计算属性，并非真正意义上的事件击发与接收。
这种方法一次只能处理一个事件，如果在同一个位置提交多个事件的话，实际上只有一个事件被转发（其他的事件留在了store当中），所以这个方法就暂时停留在非常简单的应用场景，复杂的情况下会出现意想不到的结果。
经过查阅资料，浏览器一般至少是有三个线程在运行的：JavaScript引擎线程、DOM更新线程、事件线程。而在JavaScript内部又是单线程运行的（promise、setTimeout和setInterval其实算是伪多线程），想要再启动一个线程来模拟事件的emit和on就有点乏力了。
如果有什么好的想法也欢迎留言交流讨论:D
