鍍金池/ 問(wèn)答/HTML/ vuex怎樣簡(jiǎn)化跨組件觸發(fā)事件

vuex怎樣簡(jiǎn)化跨組件觸發(fā)事件

組件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
    }
}

感覺繞了十萬(wàn)八千里，有沒有什么簡(jiǎn)單的辦法在組件A中直接觸發(fā)B組件中的事件，不考慮eventBus

回答
編輯回答
薄荷糖

Vuex 不是這樣玩的啊，它是讓你來(lái)處理全局 store 和數(shù)據(jù)流的，如果一份數(shù)據(jù)不適合放到 Vuex 中來(lái)管理，那就不要擰掰著把它放到 Vuex 中來(lái)。Vuex 的設(shè)計(jì)哲學(xué)不是組件之間用事件互動(dòng)，而是組件與全局狀態(tài)互動(dòng)，Vuex store 的快照就認(rèn)為是整個(gè) application 的快照，所以才會(huì)有操作回退、時(shí)間旅行這種 debug 操作存在。

所以你要秉承這種理念去設(shè)計(jì)跨組件的交互，而不是基于全局 store 和 watch 功能，又設(shè)計(jì)出一個(gè)詭異的事件模式，非要在一個(gè)組件中去實(shí)現(xiàn)觸發(fā)另一個(gè)組件的邏輯。

我比較好奇組件 B 中的 methodA 到底干了一些什么事情。不管它干了什么，它應(yīng)該可以更優(yōu)雅地使用 vuex 的思想實(shí)現(xiàn)。

2018年1月6日 04:26
編輯回答
爛人

vue的設(shè)計(jì)有點(diǎn)繞：slot中的組件不能算父子關(guān)系，不能用$on和$emit，于是在scoped slot中將callback傳進(jìn)去子組件，子組件通過(guò)調(diào)用callback和父組件進(jìn)行通信

2017年1月18日 11:28
編輯回答
鹿惑

兩個(gè)組件是什么關(guān)系？

2018年4月18日 00:03
編輯回答
笨笨噠

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

2018年3月14日 00:07