Question

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

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

＆＃34;本身＆＃34;方式：在组件中发出事件并在父组件中处理它们;对于我想要达到的目标而言，这似乎有点过于复杂
通过$parent.$data
我当前的解决方案，将父数据引用分配给子数据对象

像这样：

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

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

如果我是对的，有哪些更好的方法可以实现这一目标：一，全球数据结构，可从所有组件访问？

Answer 1

您正在寻找的是central state management，因为文档说：

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

您可以查看我的其他答案here和here

Vuex state可以通过getters阅读，使用mutations同步更新，通过actions从所有vue组件异步更新，甚至可以分为不同的modules

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

1 个答案: