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

Question

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

这意味着我需要一个全局数据结构.根据我的研究,我发现我有几种方法可以解决这个问题:

• "正确"的方式:在组件中发出事件并在父母中处理它们; 对于我想要达到的目标而言,这似乎有点过于复杂
• 通过直接在组件模板中访问父作用域 $parent.$data
• 我当前的解决方案,将父数据引用分配给子数据对象

像这样:

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

但是,我的第六感觉告诉我,这不是一个好习惯.

如果我是对的,有什么更好的方法来实现这一目标:一,全球数据结构,可以从所有组件访问？

Answer 1

您正在寻找的是中央状态管理，如文档所述：

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

你可以在这里和这里看看我的其他答案

Vuex 状态可以通过getter读取、使用mutations同步更新、通过所有 vue 组件的操作异步更新，甚至可以分为不同的模块。