使用Vuex实现Event bus的组件通讯的功能

1.Event bus的实现

首先创建一个新的vue实例(事件总线)，将$emit和$on都挂靠在此实例对象上，在需要用到Event bus的组件中引入，实现任意关系的A、B组件之间进行通讯，代码如下：

//bus.js
import Vue from 'vue'
export default new Vue()

//A组件触发事件
Bus.$emit("事件名称",参数)

//B组件监听事件
Bus.$on("事件名称",回调函数)

2.Vuex实现

我想到的是在state中新建一个Boolean值属性，在A组件commit更改此属性，在B组件中监听此Boolean值的变化执行相应操作(数据要同步更新，state的值必须写在computed中)，代码如下

//store.js
state() {
    return {
        initValue: false
    }
},
mutations: {
  changeData(state,value){
    state.initValue = value
  }
}

//A组件提交变动
this.$store.commit("changeData",true)    

//B组件监听state值
computed: {
  initValue() {
    return this.$store.state.initValue
  }
}
//重点：使用watch监听initValue计算属性的变化(computed也是组件的一种数据类型，另外两个是props、data)
watch: {
  initValue(newVal, oldVal) {
    //数据改变执行的操作
    console.log(newVal, oldVal);
  }
}