Vuex 簡介

若 Component 間很單純，我們使用 Prop 與 Event 溝通即可，但若 component 間很複雜，而彼此之間又有 data 改變造成連動，使用 Prop 與 Event 就會很麻煩，此時就要使用 Vuex。

Version

Vue 2.5.17

Vue CLI 3.0.0

Component 間溝通

標準的 component 溝通方式：

v-bind
v-on

• 若 component 架構較複雜，則 component 間的溝通若靠 prop 與 event 會很麻煩，必須一層一層往上 $emit event，然後再向下一層一層傳 prop

• 假如左側第二層是 購物列表 ，第三層是 購物商品 ，第四層是 購物按鈕

• 假如右側第二層是右上角 標題區塊 ，第三層是 購物數量

• 若希望 click 購物按鈕 ，會去改變 購物數量 ，由於 component hierarchy 很深，要靠 Event 與 Prop 機制就會很麻煩

Event Bus Pattern

購物按鈕
購物數量

若我們希望 購買商品 的狀態 (變數)，不是存在 購物按鈕 component 內，也不是存在 購物數量 component 內，而是存在一個 統一管理狀態 的地方，此時 Event Bus 就不適用

Vuex

• 將 購買商品 存在 Store (Vuex) 的 State 內
• 透夠 commit Mutation 去改變 State
• 若 State 改變，則所有 compnent 會自動改變 (computed)
• Vuex 符合 Unidirectional Dataflow，都只是 commit Mutation

Q : Event Bus 與 Vuex 有什麼差別 ?

• 購物按鈕 component 是 emit event 去修改 購物數量 component 的狀態 (data)
• 購物按鈕 component 是 commit Mutation 去修改全域 Store 的狀態 (data)

• Vue Component : 負責 dispatch Action 或 commit Mutation
• Action : 處理 Side Effect 地方，呼叫 API ，然後 commit Mutation
• Mutation : 修改 data 的地方，負責 mutate State ，為 Pure Function
• State : 儲存 data 的地方，當 State 被更改後，會自動 render Component (也是 Side Effect，但由 Vue 處理)
• Devtools : 可由 Chrome 的 Devtools 觀察 Mutation ，方便 debug

Summary

Vuex :

1. 讓 component 之間可以溝通
2. 但 component 之間不是直接溝通，而是透過 global state
3. 由 Action 、 Mutation 與 State 三部分組成

適用時機

• Component 很少互相溝通，上下傳遞就很夠用：Prop + Event
• Component 會互相溝通，但情境很固定，數量也很少：Event Bus
• Component 常會跨 component 傳遞狀態：Vuex
• 需要 Global 管理狀態 : Vuex

Conclusion

• Vuex 觀念來自於 React 的 Redux， 是使用 Functional Programming 思維所設計的架構，並不是 Object Oriented Programming 思維下的產物
• 因為對 state 處理想使用 Pure Function，所以有了 Mutation 機制，但總還是要有處理 Side Effect，所以有了 Action 機制
• 若沒有 Side Effect，Component 可直接 commit Mutation
• 若有 Side Effect，Component 要先 dispatch Action，然後再由 Action commit Mutation
• 並不是一定得用 Vuex，但若 component 間互動複雜，或需要 global 管理狀態時，就該使用 Vuex

Reference

Vuex , What is Vuex?