vuex使用getters篇

Posted 2023-04-27

参考技术A 注意点：
1.getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。

2.getter是自带缓存的不用写在computed中

3.如果在一个普通方法中返回牵扯到getter的数据跟data中的数据，任何一个数据改变都会引起普通方法之行，
相当于store.state.count+this.count在computed里面同样的效果，store.state.count与this.count任何一个变化都会引起computed里面的方法函数执行。
记录语法以下面例子为例：

在vue组件中的调用方法一

在vue组件中的调用方法二

在vue组件中使用mapGetters调用方发三（最常用）

在vue组件中使用mapGetters方法四另外取名

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

【中文标题】Vuex - 何时使用 getter 以及何时使用状态

【英文标题】：Vuex - When to use getters and when to use state

【发布时间】：2019-02-22 11:10:29

【问题描述】：

我很难确定何时使用 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 返回与大量数据有关的函数是否有意义？

【问题讨论】：

我有同样的问题，下面的答案解决了。

【参考方案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等。

【讨论】：

感谢您的解释。根据你说的，我觉得我对 vue 和 vuex 的看法更加清晰了。