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 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

// 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.

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.

// 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.