[Vuejs]-Reusing Components and Maintaining State with Vue

0👍

If an app is passing around props to unrelated components or it’s becoming tedious to maintain a props/emit chain through multiple descendants, then it’s probably a good time to use one of the options you mentioned. From the Vuex docs:

passing props can be tedious for deeply nested components, and simply doesn’t work for sibling components.

If the architecture isn’t that complicated, there’s probably no need to switch. But if there is…

Vuex Modules

Since Vuex allows for modules, you can probably eliminate the question of whether it negatively impacts component reusability. You can think of the component(s) + their dedicated Vuex module(s) as a package. The Vuex module can encapsulate all of the necessary store functionality without affecting any part of the store of an app that utilizes it.

Plugins

You could even create plugins from these components and use dynamic module registration to register their associated Vuex module in the app’s existing store.

You could do something similar with a plugin and event bus.

Instead of thinking of this as committing to a limitation, you can view it as the plugin providing an interface for apps to take advantage of its features. You could also go with an "all of the above" approach and create a solution for each option.

Leave a comment