What is the best way to pass and edit data in a Vue app?

Question

Vue.js

Hello.
I am currently developing a vue application that works with multiple entities on the same page. For example, there is an order page, when it is opened from the back, information about the order, information about delivery, and information about the list of goods is pulled up for 3 different requests. Requests are sent and received independently of each other. Each request has its own boolean variable that shows the state of the request (isLoading, which is currently stored locally in the parent component, not in the store). Methods for pulling these requests are stored in 3 different Vuex modules, incoming data is also stored there.

Now the main problem. On the order page, there are again several independent components, each of which can use or change data from the response of any of the 3 main requests (order, delivery, goods). There are many such components and they can be nested into each other at several levels. Accordingly, it is necessary to somehow transfer data inside these components in an optimal way, as well as save their changes. I see 3 options:

1. throwing everything with props, and allowing mutations in the fields of the object is bad, but it will work + very easy to implement, but since the nesting of components can be large, then it will not look too beautiful
   
2. props + change with emit - good, but a lot of code with constant listeners, etc.
   
3. abandon props and do everything through vuex, in components where the data will change, designate computed with set and get methods that will cause mutations in the store and output data from the store - it sounds good, but again it will look quite cumbersome.
   

From the foregoing, the question arises, which method for exchanging data to choose and what methods that take place, I have not described

Answer 1

Everything depends on the situation. Sometimes it’s much easier to throw with a prop than to write a bunch of code and pull data from their storage.
All three thoughts are quite adequate, but it is obvious that the third option fits much better .
Firstly: you see where the data is coming from, and you don’t run through the components and don’t look for where the legs grow from.
Secondly: if you need to pull up a dozen data, you will go crazy throwing them like callas from component to component, but through the storage you can not pull everything at once, but take the necessary action, leggings, mute and call it.