---
title: "用 Vue.js 實作簡單的 Flux 架構"
description: "對於只需要簡單狀態管理模式的小型 app，我總是用一個元件來保存整個 app 的狀態，也就是一個 container。它作為 single source of truth，讓 app 參照自己的狀態…"
canonical: https://oozou.com/til/simple-flux-architecture-with-vue-js-50
locale: zh-Hant
date: 2020-10-13
topic: javascript
---

# 用 Vue.js 實作簡單的 Flux 架構

> 對於只需要簡單狀態管理模式的小型 app，我總是用一個元件來保存整個 app 的狀態，也就是一個 container。它作為 single source of truth，讓 app 參照自己的狀態…

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

對於只需要簡單狀態管理模式的小型 app，我總是用一個元件來保存整個 app 的狀態，也就是一個 container。它作為 single source of truth，讓 app 參照自己的狀態。Vue 提供了一種在根層級建立全域事件監聽器的機制，叫做 *EventBus*，這是模擬 flux 架構超級簡單的方式。

你只需要一個把 Vue 匯出為 *EventBus* 的模組，像這樣

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

接著你就可以在 container 裡用它來*監聽*來自 app 中任何元件的事件。我通常會在 *created* 生命週期加上監聽器。

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

接著你可以在任何元件中匯入 *EventBus*，就能從任何地方觸發 *my-custom-event*，不必把事件 *emit* 給該元件的父層，也不必在觸發變更的元件和目標 container 之間的每一層元件裡重複整個流程。

```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/zh-Hant/contact

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