vue.js - Vuex - 哪些数据应该流经商店？

Question

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

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

我正在构建的 SPA 处理大量数据。最初我只是把“主要”的东西放进去。然而，这是错误的吗？ store 是否应该实际保存 SPA 的所有 数据？如果我在网页上显示数据，它应该流经 store 吗？

Answer 1

根据经验，数据是否仅由一个组件使用，或者它是传播给子组件的一种方式，您应该可以在组件级别拥有它。

但是如果数据被两个以上的组件更改和访问，它可以被置于集中状态:这就是 vuex。

引自docs :

if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. There's a good quote from Dan Abramov, the author of Redux:

Flux libraries are like glasses: you’ll know when you need them.

您也可以引用vue-hackernews例如，您可以在哪里看到 lists , users在 vuex store 中，而组件也有 data while 仅特定于该组件。

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: []
    }
  },