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

组件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

阅读 9k
4 个回答

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

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

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

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

两个组件是什么关系?

vue的设计有点绕:slot中的组件不能算父子关系,不能用$on和$emit,于是在scoped slot中将callback传进去子组件,子组件通过调用callback和父组件进行通信

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题