Design patterns for synchronizing Component interactions?

#1

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?

#2

I would say that your Vuex approach is the correct one.

Why do you think this?

Best practice would be to use state management, such as Vuex.

Event busses are generally discouraged. They can be hard to debug and don’t really give you a good idea of what your state is.

The problem with $refs is they’re context dependent. If you’re 5 levels deep into a child component how will you instruct the Sidebar to show/hide?

1 Like