I’m working on a robust and highly complex application with a variety of Vuex modules for managing global state between our components.
One problem that we are running into is that we are also needing a global, centralized way to handle LOGIC between components as well. For example, when mutation X occurs, we need a global Sidebar to pop open and a global Modal to appear simultaneously.
Right now we are handling some of this in Vuex, for example, we have a isSidebarExpanded
state and expandSidebar
mutation. We feel Vuex has provided an appropriate way to handle this global “component actions”, so far, but feel it may not be very scalable.
Both of these actions could be handled independently within said Sidebar and Modal component. But we are looking for a way to control these events from one centralized dispatcher. Is there an accepted best practice for accomplishing something like this? E.g. is there some place a piece of code like the following could be put? Perhaps a global event bus?
onDataFetched() {
this.$refs.sidebar.show()
this.$refs.modal.show()
}
If such an approach was implemented, would the added complexity be worth it?