Currently, I am working on a single page application using Vue.js. The app is designed as an extended spreadsheet with different views managed by vue-router. Some of these views are for entering new data, while others are for performing calculations on the existing data. However, all the data entered in one view is interconnected with data in another view - creating a need for a global data structure.
In my search for solutions, I have come across various options:
- The conventional method: emitting events in components and handling them in the parent; although this seems overly complex for my requirements.
- Directly accessing the parent scope in component templates through
$parent.$data. - My current approach involves assigning the parent data reference to the child data object.
This method looks something like this:
const REPORTS = {
template: templates.reports,
data: function(){
return this.$parent.$data
}
};
However, I have a feeling that this may not be considered best practice.
If my intuition is correct, what would be more efficient ways to achieve a global data structure accessible from all components?