Vue 有效地使用计算属性

Posted 2023-02-23

【中文标题】Vue 有效地使用计算属性

【英文标题】：Vue effectively using computed property

【发布时间】：2021-07-23 12:15:02

【问题描述】：

我的计算属性中有以下代码。该功能预计会变得复杂。把所有东西都放在这里是正确的吗？我想将它放在我的商店文件中，但我无法从计算属性中按名称调用函数。有什么建议吗？

computed: 
  assignValue() 
    this.valueToSet = this.value1;
    
    if (this.valueToSet < 10) 
      return "1 week"
     else if (this.valueToSet < 20) 
      return "2 weeks"
     else if (this.valueToSet < 30) 
      return "3 weeks"
     else 
      return 0;
    
  

总而言之，我想将它放在我的 store.js (vuex) 中，但是如何在“计算机属性”中按名称调用/触发函数。

如果不可能，有什么有效的替代方案吗？还是我应该继续这样？

【参考方案1】：

Vuex 本身具有 getter 属性，您可以将其与 Vue 组件的计算属性一起使用，如文档中所示。

就您的代码而言，您当前的方法没有问题。当您需要在多个组件中重用该状态时，您应该将此代码移至 Vuex getter。

您的代码中唯一的问题是this.valueToSet = this.value1;。计算属性不应产生副作用（包括赋值）。没有直接的危害，但由于计算值被缓存，它可能会在内部产生意想不到的后果。如果您仍然需要这部分 - this.valueToSet = this.value1; - 将其移至其他计算属性或使用 watch 表达式。

【讨论】：

感谢您的准确回答。据我了解，我可以调用 this.$store.getter.xxx。从计算的属性中？关于（this.valueToSet = this.value1）。当然我不会用。将使用 store.state 访问所有内容。等待您的确认。

在计算中只需用this.value1 < 10替换所有表达式，如this.valueToSet < 10等。计算将自动“监视”this.value1 的变化。

@MEAG 不，您将所有这些计算代码（减去该分配行）移动到您商店中的 getter 中。然后，您将该 getter 映射到您的页面/组件中的计算属性中（使用 ...mapGetters('modulename', ['getterName']) 最容易完成。然后您可以在模板中使用 getterName 引用它

@MEAG 和 Soviut 说的一模一样。