Vuex-何时使用getter和何时使用state

vue.js Vue.js

Tom路易

2020-04-07

我很难弄清楚何时使用吸气剂或状态以获得最佳性能。

我将列出一些方案,欢迎您对它们进行评论:

场景1-吸气剂与动作和吸气剂的状态

在操作或获取程序中,如果多次使用产品列表来查找结果,那么您将使用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返回与大量数据有关的函数是否有意义?

第4051篇《Vuex-何时使用getter和何时使用state》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
小小 2020.04.07

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无法帮助您缓存该函数调用的结果。您必须找出一种方法来最小化它的调用次数,或者合并备忘录等。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android