有時該用Observable取代Vuex,Observable能更好的解決資料共享降低耦合度!

Lululala

May 23, 2021 Published

大部分人都知到使用Vuex解決資料傳遞多層組件,但也滿大部分人因為只知道Vuex而只拿著一把槍上戰場,造成Vuex越來越龐大且耦合度越來越高,時常連命名都變成是一件困難的事,而Vue.observable某些情況會是一個很棒的替代方案。

如果你常發生類似以下狀況卻還是使用Vuex,那麼這篇會是你的救命草

  1. 登入彈窗、註冊彈窗以及其他類型彈窗,須控制一次只能一個出現

  2. 像是Medium文章點讚按鈕,出現在文章的上、中、下位置,但點其他中一個讚其他兩個也要作用

  3. FIRSTAGE首頁的卡片組件Hover時會有彈出效果,同時使用v-for渲染多個,但一次只能有一個卡片有Hover效果

解決的方式很簡單,只要把組建的抽象層抽出來,且共用值使用Vue.oberable而不是Vuex即可

上面文字範例太難懂,工程獅就是要看Code!

1.登入彈窗、註冊彈窗以及多個其他類型彈窗,須控制一次只有一個出現

Dialog.vue

DialogSigin.vue

DialogLogin.vue

2.像是Medium文章點讚按鈕,出現在文章的上、中、下位置,但點其他中一個讚其他兩個也要作用

ButtonLike.vue

Post.vue

3.FIRSTAGE首頁的卡片組件Hover時會有彈出效果,同時使用v-for渲染多個,但一次只能有一個卡片有Hover效果

Card.vue

Homepage.vue

此範例的computed有個小技巧是store.hoverId === this.id,這樣就能決定各自的卡片要不要有hover效果

以上範例使用Vue.obserable的好處是

  1. Code的維護程度變簡單許多,因程式碼都在同個組件內,相較於Vuex的使用方式,邏輯不會分散世界各地,凝聚該組建的耦合度。

  1. 省去Vuex檔案的命名,時常檔案命名是最難的!

Obserable Vue Vuex