Vue.js 中的一个全局数据结构

Question

我正在使用 Vue.js 构建一个单页应用程序。这是一个相对简单的应用程序，更像是一个扩展的、固执己见的电子表格。我正在使用 vue-router 来处理应用程序的不同视图，一些用于输入新数据，一些用于对数据执行计算，但所有数据都是交织在一起的（在视图 #1 中输入的数据用于在视图 #2 中输入数据，然后两者都用于在视图 #3 中进行计算。

这意味着我需要一个全局数据结构。根据我的研究，我发现我有几种选择来处理这个问题：

"proper"方式：在组件中发出事件并在父级处理它们；对于我想要实现的目标来说，这似乎有点过于复杂
通过$parent.$data
我目前的解决方案，将父数据引用分配给子数据对象

像这样：

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

然而，我的第六感告诉我，这不是一个好的做法。

如果我是对的，实现此目标的更好方法是什么：一是全局数据结构，可从所有组件访问？

Answer 1

您正在寻找的是 central state management，如文档所述：

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.

你可以看看我的其他回答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.

Vue.js 中的一个全局数据结构

One global data structure in Vue.js

javascript

vue.js

vue-component