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 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
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.
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.
Here is what CustomButton could look like
That’s it. As your app gets larger, you might want to consider using Vuex especially if many containers shared certain states.
Cheers!
