Vue.jsで実現するシンプルなFluxアーキテクチャ
2020年10月13日
シンプルな状態管理パターンだけで十分な小規模アプリの場合、私はいつもアプリの状態を保持するコンポーネント、つまりコンテナをひとつ用意します。これはアプリが自身の状態を参照するための単一の信頼できる情報源として機能します。Vueには EventBus と呼ばれるルートレベルのグローバルイベントリスナーを作る仕組みがあり、Fluxアーキテクチャを模倣する非常に簡単な方法になります。
必要なのは、次のようにVueを EventBus としてエクスポートするモジュールをひとつ作るだけです
// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
これをコンテナの中で使うと、アプリ内の任意のコンポーネントからのイベントを listen できます。私は普段 created ライフサイクルでリスナーを追加しています。
EventBus.$on('event-name', callback)
その後は、任意のコンポーネントに EventBus をインポートすれば、どこからでも my-custom-event をトリガーできます。イベントをそのコンポーネントの親に emit して、変更をトリガーするコンポーネントとターゲットのコンテナの間にあるすべてのコンポーネントで同じ処理を繰り返す必要はありません。
// Goes directly to the global listener and triggers callback
EventBus.$emit('event-name')
以上です。複雑になりすぎてきたら、Vuexの利用を検討してください。