適合複雜的 Component 間的狀態管理

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

Version


Vue 2.5.17
Vue CLI 3.0.0

Component 間溝通


intro000

標準的 component 溝通方式:

  • 上層 component 透過 v-bind 與 props 將 data 往下傳遞
  • 下層 component 透過 v-on 與 Emit Event 將 data 往上傳遞

intro001

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

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

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

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

Event Bus Pattern


intro002

  • 新建立一個 Vue Instance
  • 購物按鈕 引入 Event Bus,請 Event Bus 去 emit event
  • 購物數量 也引入 Event Bus,去監聽 Event Bus 所發出的 event

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

Vuex


intro003

  • 購買商品 存在 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)

intro004

  • 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. ActionMutationState 三部分組成

適用時機


  • 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?

2018-11-17