Vuex - 何时使用getter以及何时使用state

Question

我很难确定何时使用吸气剂或状态以获得最佳性能.

我将列出一些您欢迎评论的场景:

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

在动作或获取器中,如果您多次使用产品列表来查找结果,那么您是否会使用getters.products或state.products？

此外,如果您需要在同一功能中使用产品10次,您会将getters.products或state.products称为10次,还是将产品分配给变量,然后再使用10次？是否有任何超过其他人的性能增益？

场景2 - Getters返回一个函数

在Vuex文档中,它声明在getter中返回一个函数不会缓存该函数的结果.所以有一个用于排序1000个产品列表的吸气剂会很糟糕,对吧？喜欢:

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

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

有一个状态而不是通过动作和变异手动更新会更好吗？

通常,让getter返回与大量数据有关的函数是否有意义？

Answer 1

Vuex 吸气剂是Vue的计算方式，Vuex 状态是Vue 数据的计算方式。

场景1

在操作或获取器中，如果多次使用产品列表来查找结果，那么您将使用getters.products或state.products吗？

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

假设您具有products状态，该状态是产品对象的数组。如果需要在多个位置访问已排序（例如）products，则进行一次sortedProductsgetter会比products每次都进行排序要好，因为Vue会缓存结果并且仅在products数组更改时才重新计算其值。

另外，如果您需要在同一函数中使用产品10次，您会调用getters.products还是state.products 10次，还是先将产品分配给变量，然后再使用10次？在其他方面是否有性能提升？

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

方案2

该sortedProductsgetter函数不返回的函数，这样Vuex将缓存的结果。

最好有一个状态，该状态可以通过动作和突变手动更新？

如果您正在谈论自己的sortedProducts吸气剂，不。

通常，让getter返回与大量数据有关的函数是否有意义？

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

如果您有一个返回一个函数并处理大量数据的getter，则Vuex无法帮助您缓存该函数调用的结果。您必须找出一种方法来最小化它的调用次数，或者合并备忘录等。