Vuex - 何时使用 getter 以及何时使用状态

Question

我很难确定何时使用 getter 或 state 以获得最佳性能。

我会列出一些场景，欢迎大家评论：

场景 1 - Getter VS 动作和 getter 中的状态

在操作或 getter 中，如果您多次使用产品列表来查找结果，您会使用 getters.products 还是 state.products？

另外，如果您需要在同一个函数中使用产品 10 次，您会调用 getters.products 或 state.products 10 次，还是会在开始时将产品分配给一个变量，然后使用那 10 次 次？有没有比其他的有任何性能提升？

场景 2 - Getter 返回函数

在 Vuex 文档中，它指出在 getter 中返回函数不会缓存该函数的结果。所以有一个用于对 1000 种产品列表进行排序的吸气剂会很糟糕，对吧？喜欢：

const getters = {
  sortedProducts: state => {
    return state.products.sort(a, b => {
      ...
    })
  }
}

因此，当产品更新时，可能会或可能不会改变排序，然后它会再次进行整个计算，或者？

拥有一个通过动作和突变手动更新的状态会更好吗？

一般来说，让 getter 返回与大量数据有关的函数是否有意义？

Answer 1

Vuex getters 对于 Vue computed 就像 Vuex state 对于 Vue data。

场景 1

在操作或 getter 中，如果您多次使用产品列表来查找结果，您会使用 getters.products 还是 state.products？

我不太了解您的情况；一个代码示例会更好地说明您的意思。

假设您有 products 状态，它是一个产品对象数组。如果您需要在多个地方访问 sorted（例如）products，那么制作一个 sortedProducts getter 会比每次都对 products 进行排序要好，因为 Vue 会缓存结果并且仅在 products 数组更改时重新计算其值。

另外，如果您需要在同一个函数中使用产品 10 次，您会调用 getters.products 或 state.products 10 次，还是会在开始时将产品分配给一个变量，然后使用 10 次？有没有比其他的有任何性能提升？

如果您担心性能，则无需在函数开头将其分配给变量。访问 store state 或 getter 的性能成本可以忽略不计。代码可读性在这里更重要。

场景 2

sortedProducts getter 函数没有返回函数，所以 Vuex 会缓存结果。

拥有一个通过动作和突变手动更新的状态会更好吗？

如果你是在谈论你的 sortedProducts getter，那不是。

一般来说，让 getter 返回与大量数据有关的函数是否有意义？

您需要 getter 来返回函数的唯一情况是，如果您希望 getter 能够接受参数，在这种情况下，getter 更像 Vue 组件 方法 而不是一个 Vue 组件的 computed 属性。

如果你有一个返回函数并处理大量数据的 getter，那么 Vuex 无法帮助你缓存该函数调用的结果。你必须想办法尽量减少调用次数，或者合并memoization等。