Vuex - 哪些数据应该流经商店？答案

【问题标题】：Vuex - what data should be flowing through the store?Vuex - 哪些数据应该流经商店？
【发布时间】：2023-04-02 20:57:01
【问题描述】：

我了解什么 store 是什么以及 Vuex 的目的，但现在我在想：

“我实际上在商店里放了什么？”

我正在构建的 SPA 处理大量数据。最初我只投入“主要”的东西。然而，这样有错吗？ store 是否应该实际保存 SPA 的所有数据？如果我在网页上展示数据，那应该是通过store吗？

【问题讨论】：

标签： vue.js vuejs2 vuex state-management

【解决方案1】：

根据经验，数据是仅由其中一个组件使用，还是以一种方式传播给子组件，您应该可以在组件级别使用它。

但如果数据被两个以上的组件更改和访问，它可以处于集中状态：即 vuex。

引用docs:

如果您正在构建一个中型到大型的 SPA，那么您有机会遇到让你思考如何更好地处理的情况 Vue 组件之外的状态，Vuex 将是自然的下一步。作者丹·阿布拉莫夫（Dan Abramov）的名言很好 Redux：

Flux 库就像眼镜：你会知道什么时候需要它们。

您也可以参考vue-hackernews 示例，其中您可以看到lists、users 在vuex 存储中，而组件也有data，而仅针对该组件。

data 在组件中：

  data () {
    const data = {
      loading: false,
      transition: 'slide-up',
      displayedPage: isInitialRender ? Number(this.$store.state.route.params.page) || 1 : -1,
      displayedItems: isInitialRender ? this.$store.getters.activeItems : []
    }
    isInitialRender = false
    return data
  },

state 在 vuex 中：

  state: {
    activeType: null,
    itemsPerPage: 20,
    items: {/* [id: number]: Item */},
    users: {/* [id: string]: User */},
    lists: {
      top: [/* number */],
      new: [],
      show: [],
      ask: [],
      job: []
    }
  },

【讨论】：

"如果数据被两个以上的组件更改和访问，则可以将其置于集中状态" 即将上市。