---
title: "Simple Flux architecture with Vue.js"
description: "For a small app that only needs a simple state management pattern. I always use one component to hold the state of the app, a container. This act as a single source of truth for an app to refer to…"
canonical: https://oozou.com/til/simple-flux-architecture-with-vue-js-50
locale: en
date: 2020-10-13
topic: javascript
---

# Simple Flux architecture with Vue.js

> For a small app that only needs a simple state management pattern. I always use one component to hold the state of the app, a container. This act as a single source of truth for an app to refer to…

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

For a small app that only needs a simple state management pattern. I always use one component to hold the state of the app, a container. This act as a single source of truth for an app to refer to its states. Vue provides a mechanism to create a global event listener on the root level called *EventBus* which is a super simple way to mimic flux architecture.

All you need is one module that exports Vue as *EventBus* like so

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

Then you can use it inside your container to *listen* to event from any component inside the app. I normally add the listener on *created* life cycle.

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

Then you can import *EventBus* into any of your components and you can triggers *my-custom-event* from anywhere without having to *emit* the event to that component's parent and repeat the whole process in every component in between the component that triggers the change and the target container.

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

That's it. If it's getting too complex, consider using Vuex.

---

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

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