What is the best way to store/modify data in SPA (Vue)?

Question

JavaScript

Hello!
I want to find a solution that will be good for most cases.
The idea is this:
There is a site on which there are many pages, for each page data is requested from the server, this data is transferred to the components.
When the data in one component changes, the data in other components on this page can also change - everything is reactive.

I see the following approaches for storing / changing data: the

page is the parent for all components

1. Vuex - we create a separate store for each page, in the components of this page we connect data through computed properties, we make all changes through dispatch/commit .

2. We store the data in the page component. Throughprovide/inject in the components we connect data and methods to change the data.

3. We store the data in the page component. We pass it through props and change it through $emit .

Who has experience? What problems did you face? What was more convenient to use?

Answer 1

Vuex