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

感覺(jué)繞了十萬(wàn)八千里，有沒(méi)有什么簡(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

編輯回答