vuex怎样简化跨组件触发事件

Question

组件A：this.$store.commt('change')组件B:methods:{    methodA(){        ...    }},computed:{    eventChange(){        return this.$store.state.eventChange    }},watch:{    eventChange(val){        this.methodA()    }}store:state:{    eventChange:false},mutations:{    change(state){        state.eventChange = !state.eventChange    }}感觉绕了十万八千里，有没有什么简单的办法在组件A中直接触发B组件中的事件，不考虑eventBus

Answer 1

Vuex 不是这样玩的啊，它是让你来处理全局 store 和数据流的，如果一份数据不适合放到 Vuex 中来管理，那就不要拧掰着把它放到 Vuex 中来。Vuex 的设计哲学不是组件之间用事件互动，而是组件与全局状态互动，Vuex store 的快照就认为是整个 application 的快照，所以才会有操作回退、时间旅行这种 debug 操作存在。

所以你要秉承这种理念去设计跨组件的交互，而不是基于全局 store 和 watch 功能，又设计出一个诡异的事件模式，非要在一个组件中去实现触发另一个组件的逻辑。

我比较好奇组件 B 中的 methodA 到底干了一些什么事情。不管它干了什么，它应该可以更优雅地使用 vuex 的思想实现。

Answer 2

父=>子 props
子=>父(爷爷、祖父...) $on $emit
不是直系血脉，eventBus 或 vuex