时间戳

首页 > 解决方案 > Vue 有效地使用计算属性

vue.js - Vue 有效地使用计算属性

问题描述

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

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) 中，但是如何在“计算机属性”中按名称调用/触发函数。

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

标签： vue.jsvuexcomputed-properties

解决方案

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

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

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

推荐阅读