---
title: "Vue.jsで実現するシンプルなFluxアーキテクチャ"
description: "シンプルな状態管理パターンだけで十分な小規模アプリの場合、私はいつもアプリの状態を保持するコンポーネント、つまりコンテナをひとつ用意します。これはアプリが自身の状態を参照するための単一の信頼できる情報源として機能します…"
canonical: https://oozou.com/til/simple-flux-architecture-with-vue-js-50
locale: ja
date: 2020-10-13
topic: javascript
---

# Vue.jsで実現するシンプルなFluxアーキテクチャ

> シンプルな状態管理パターンだけで十分な小規模アプリの場合、私はいつもアプリの状態を保持するコンポーネント、つまりコンテナをひとつ用意します。これはアプリが自身の状態を参照するための単一の信頼できる情報源として機能します…

Published: 2020-10-13 · Topic: [javascript](https://oozou.com/ja/til-topics/javascript) ([markdown](https://oozou.com/ja/til-topics/javascript.md))

シンプルな状態管理パターンだけで十分な小規模アプリの場合、私はいつもアプリの状態を保持するコンポーネント、つまりコンテナをひとつ用意します。これはアプリが自身の状態を参照するための単一の信頼できる情報源として機能します。Vueには *EventBus* と呼ばれるルートレベルのグローバルイベントリスナーを作る仕組みがあり、Fluxアーキテクチャを模倣する非常に簡単な方法になります。

必要なのは、次のようにVueを *EventBus* としてエクスポートするモジュールをひとつ作るだけです

```javascript
// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
```

これをコンテナの中で使うと、アプリ内の任意のコンポーネントからのイベントを *listen* できます。私は普段 *created* ライフサイクルでリスナーを追加しています。

```javascript
EventBus.$on('event-name', callback)
```

その後は、任意のコンポーネントに *EventBus* をインポートすれば、どこからでも *my-custom-event* をトリガーできます。イベントをそのコンポーネントの親に *emit* して、変更をトリガーするコンポーネントとターゲットのコンテナの間にあるすべてのコンポーネントで同じ処理を繰り返す必要はありません。

```javascript
// Goes directly to the global listener and triggers callback
EventBus.$emit('event-name')
```

以上です。複雑になりすぎてきたら、Vuexの利用を検討してください。

---

Contact OOZOU: hello@oozou.com · +66 2544 0000 · https://oozou.com/ja/contact

More for AI agents: https://oozou.com/llms.txt · every page has a markdown twin at its URL plus ".md"