用 Vue.js 實作簡單的 Flux 架構
October 13, 2020
對於只需要簡單狀態管理模式的小型 app，我總是用一個元件來保存整個 app 的狀態，也就是一個 container。它作為 single source of truth，讓 app 參照自己的狀態。Vue 提供了一種在根層級建立全域事件監聽器的機制，叫做 EventBus，這是模擬 flux 架構超級簡單的方式。
你只需要一個把 Vue 匯出為 EventBus 的模組，像這樣
// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
接著你就可以在 container 裡用它來監聽來自 app 中任何元件的事件。我通常會在 created 生命週期加上監聽器。
EventBus.$on('event-name', callback)
接著你可以在任何元件中匯入 EventBus，就能從任何地方觸發 my-custom-event，不必把事件 emit 給該元件的父層，也不必在觸發變更的元件和目標 container 之間的每一層元件裡重複整個流程。
// Goes directly to the global listener and triggers callback
EventBus.$emit('event-name')
就這樣。如果狀況變得太複雜，可以考慮改用 Vuex。