时间戳

首页 > 解决方案 > Vuex（Flux）模式：应该存储哪种类型的数据？

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

问题描述

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

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

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

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

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

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

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

标签： javascriptvue.jsvuexflux

解决方案

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

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

更多信息：https ://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/

推荐阅读