Standard component interaction mechanisms vs Vuex – how to combine them?

Tags: , ,



The question is probably more theoretical.
I have little experience with Vue and am trying to figure out where my knowledge gaps are and fill them.

There are standard mechanisms for interaction between components:

  • from top to bottom – input parameters (props) are passed from parent components to child components
  • from bottom to top – events are thrown from child to parent

And on the other hand, there is VUEX with its own data storage, which is, roughly speaking, a global variable object with a set of methods for working with it.

Data from this storage is available at any time to any component. And it turns out that the use of Vuex seems to make the standard interaction mechanisms of components completely unnecessary.
Well, perhaps, the generation of events is still needed so that one component can quickly make it clear to the other about the completed action, events, etc.

The question is, does Vuex generally override the standard component interactions?
If it is not, how should it be combined in the right way?

Answer

I’ll try to answer your question.

Vuex will be very usefull to store data that you’ll need in a part of the application or globally, like user data.

If you can simply use $emit or props use it, it will be better and simple to understand the code, because it will be overkill to use the store just for “a prop”.

So, you will use Vuex in your component to call an action and fetch / store some data you will need in a another view out of your children/parents context.

I don’t know if my explanations are well haha, I tried 🙂



Source: stackoverflow