在 Vuex 中基于状态属性进行计算的正确方法是啥？

Posted 2023-02-22

【中文标题】在 Vuex 中基于状态属性进行计算的正确方法是啥？

【英文标题】：What is the correct way to do calculations based on state properties in Vuex?在 Vuex 中基于状态属性进行计算的正确方法是什么？

【发布时间】：2020-12-03 17:49:55

【问题描述】：

我有一些相互依赖的 Vuex 属性，我想知道用它们进行计算的最佳方法。

例如，

我的州有一个 fontSize 属性，其值为 16。

state: 
    fontSize: 16,

现在我还想要一个 lineHeight，它是通过将 fontSize 乘以 1.4 的系数来计算的。

所以我可以在我的吸气剂中说：

getters: 
   lineHeight: state => state.fontSize * 1.4

这是正确的做事方式还是我应该使用 Mixins/新的 Vue3 组合 API 而不是 Vuex 来进行这些类型的计算？

【问题讨论】：

State：杂货店。很多人需要它。 Mixin：我的家，我的家人和朋友来访时需要它。 In Component：我的卧室，只有我需要这个。

这是一个很好的描述方式:)。谢谢

【参考方案1】：

是的，根据official doc 是正确的：

有时我们可能需要根据商店状态计算派生状态，例如过滤物品列表并计算它们

您还可以使用基于 fontSize 状态属性的名为 lineHeight 的计算属性：

computed:
   lineHeight()
      this.$store.state.fontSize*1.4
   

【讨论】：

太棒了，阅读文档，确实在那里。谢谢你:)。