本來(lái)想用Vuex狀態(tài)管理的，但是在兄弟組件事件觸發(fā)上遇到了很大的問(wèn)題，只好按官方的說(shuō)法用了總線的形式：var bus = new Vue();//A組件觸發(fā):methods: { //上傳方法 confirmEdit(){ bus.$emit('confirmEdit'); }, }//B組件調(diào)用:created (){ bus.$on('confirmEdit', () => { this.addModal.name = somthing this.customAlertFunc(...) }也用到了store: var store = new Vuex.Store({ state: { shopId:parseURL().shopId, reservationShopList:[], isTabHide: false, isEdit: false, } });結(jié)果只是用來(lái)儲(chǔ)存一部分變量，其實(shí)換成全局變量也完全可以= =|| : var commonData = { shopId: parseURL().shopId, reservationShopList: [], isTabHide: false, isEdit: false, }網(wǎng)上也找不到Vuex的正確的使用方法啊…這玩意到底怎么用？和全局變量區(qū)別在哪里？怎么用Vuex把總線替掉？問(wèn)題補(bǔ)充：求一個(gè)總線的Vuex實(shí)現(xiàn)
2 回答
慕婉清6462132
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超2個(gè)贊
如果只是想兄弟組件通信的話, 可以不使用vuex, 通過(guò)一個(gè)全局的事件機(jī)制就行了
可以這樣做var eventBus = new Vue()
然后在兄弟組件里面引用這個(gè)Vue 實(shí)例, 通過(guò)$on 和 $emit 就可以了
婷婷同學(xué)_
TA貢獻(xiàn)1844條經(jīng)驗(yàn) 獲得超8個(gè)贊
實(shí)際上vue1.X里面是有類(lèi)似方法的，$dispatch 和 $broadcast，就是和總線相同的用法。
但是在vue2.X被移除了，原因是事件流會(huì)因此變得脆弱而難以理解，Bus實(shí)際是broadcast的升級(jí)版：
通過(guò)使用事件中心，允許組件自由交流，無(wú)論組件處于組件樹(shù)的哪一層。由于 Vue 實(shí)例實(shí)現(xiàn)了一個(gè)事件分發(fā)接口，你可以通過(guò)實(shí)例化一個(gè)空的 Vue 實(shí)例來(lái)實(shí)現(xiàn)這個(gè)目的。
如果要改寫(xiě)成VUEX，推薦的做法是把所有數(shù)據(jù)，和相關(guān)方法全部置入store，所有子組件只需要發(fā)送mutation調(diào)取store中的方法和數(shù)據(jù)，雖然看起來(lái)這種做法會(huì)讓store顯得過(guò)于臃腫龐大，但是對(duì)于復(fù)雜系統(tǒng)的構(gòu)建是更具優(yōu)勢(shì)的。而且官方也提供了將store切分的解決方案。
添加回答
舉報(bào)
0/150
提交
取消