One global data structure in Vue.js

Question

I am creating a single page application with Vue.js. This is a relatively simple application, more like an extended, stubborn table. I use vue-router to process various representations of the application, some of them are used to enter new data, some of them are used to perform calculations on data, but all this data is intertwined (data entered as # 1 are used to enter data in the field view No. 2, and then both are used to calculate something like No. 3).

This means that I need a global data structure. From my research, I found that I have several options for this:

• the "right" way: emit events in components and process them in the parent; which seems a bit complicated for what I want to achieve.
• access to the parent area directly in component templates via $parent.$data
• my current solution by assigning a parent link to the data of the child data object

Same:

 const REPORTS = { template: templates.reports, data: function(){ return this.$parent.$data } }; 

However, my sixth sense tells me that this is not a good practice.

If I'm right, what is better for this: one global data structure accessible from all components?

Answer 1

What you are looking for is central state management , as docs says:

Large applications can often develop in complexity due to the many parts of the state scattered across many components and the interactions between them. To solve this problem, Vue offers vuex : our own Elm public rights management library. It even integrates with vue-devtools, providing zero access to time travel.

You can see my other answers here and here.

Vuex state can read through getters , updated synchronously using mutations , updated asynchronously through actions from all vue components, and even divided into different modules .