Vuex（Flux）模式：应该存储哪种类型的数据？答案

【问题标题】：Vuex (Flux) pattern: Which type of data should be stored in it?Vuex（Flux）模式：应该存储哪种类型的数据？
【发布时间】：2020-06-30 16:23:57
【问题描述】：

我正在创建一个应用程序并第一次使用 Vuex。这个应用程序是在 Vue.js 中构建的，并且足够复杂，需要一个在所有组件之间共享的单例存储对象。 Vuex 似乎是一个很好的解决方案，但我仍然不确定将哪些数据存储在我的 vue 实例/组件中以及存储在 Vuex 中。

根据 Vuex 文档，它存储“状态数据”。通过术语，我假设状态只是代表应用程序本身当前状态的数据，例如：

{
    isUserLoggedIn: true,
    isPaymentModalShowing: false,
    isLeftMenuOpen: true,
    ....
}

基本上，所有可以以动词“是”开头的东西（定义“状态”）

这并不能真正解决我的问题，因为我使用单例存储来提供对我所有组件的数据访问，这些数据不仅代表应用程序的“状态”，还代表用户数据，例如：

{
  userData:{
    email: "test@test.com",
    name: "John Doe",
    age: 28
 }
}

所以我的问题很简单，尽管我不确定是否有一个简单的答案：我应该在 Vuex 存储对象中保留哪种类型的数据，以及我应该在组件或应用程序对象中保留哪种类型的数据？

【问题讨论】：

Vuex 的目的是为 Vue 组件之间共享的数据提供响应性。从这个意义上说，多个组件想要做出反应的一切都是可以添加到 Vuex 的状态。该组件将具有特定于单个组件的状态。如果数据没有发生变化，例如您的用户对象，那么最好将其放置在由您的组件导入的对象中。

【解决方案1】：

Vuex 的主要目的之一是成为应用程序的单一事实来源。这意味着它绝对应该保存在多个地方使用的信息。

此外，Vuex 不仅保存应用程序状态，还保存所有相关数据——您可以为 UI 和用户以及汽车拥有单独的模块。根据经验：如果您在多个地方使用数据 - 将其存储在 Vuex 中。如果数据在一个地方使用——你可以在 Vuex 中不使用状态并使用组件状态。

【讨论】：