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

我正在使用Vue.js构建一个单页应用程序。这是一个相对简单的应用程序，更像是一个扩展的、固执己见的电子表格。我正在使用

vue router

处理应用程序的不同视图，一些用于输入新数据，一些用于对数据执行计算，但所有数据都是相互交织的（在视图#1中输入的数据用于在视图#2中输入数据，然后两者都用于计算视图#3中的数据）

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

• “正确”的方式：在组件中发出事件并在父级中处理它们；对于我想要实现的目标来说，这似乎有点过于复杂了
• 通过

  $parent.$data

• 我的当前解决方案，将父数据引用指定给子数据对象

像这样：

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

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

---

如果我是对的，实现这一点的更好方法是什么：一种，全局数据结构，可从所有组件访问？您正在寻找的是一个，正如docs所说：

由于多个状态分散在多个组件上以及组件之间的交互，大型应用程序的复杂性通常会增加。为了解决这个问题，Vue提供了：我们自己的Elm启发的状态管理库。它甚至集成到vue开发工具中，为时间旅行提供零设置访问

你可以看看我的其他答案

---

可以通过读取、使用同步更新、通过从所有vue组件异步更新，甚至可以分为不同的组件。

谢谢，这正是我想要的。出于好奇，将父数据引用传递给子组件有多糟糕？@angr一点也不坏，如果通信仅限于父-子组件，您可以随时进行详细的父子通信，但如果您需要在多个组件之间进行通信，而这些组件在使用vuex之后可能会变得混乱。