One Global Data Structure In Vue.js

I am building a single page app with Vue.js. It's a relatively simple app, more like an extended, opinionated spreadsheet. I'm using vue-router to handle different views of the app

Solution 1:

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

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

You can have a look at my other answers here and here

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