javascript - 如何在vuex中将2个参数传递给getter？

因此，不确定这是否是正确的解决方法，但是我正在尝试创建一个吸气剂，该吸气剂将基于通过函数传递给它的2种颜色返回渐变。到目前为止，我有：

函数被调用

<v-card-text
        style="height: 120px"
        :style="{
            'background-image': backgroundImage(card.color1, card.color2),
        }"
        flat
    ></v-card-text>

计算：

backgroundImage() {
            return this.backgroundImage(color1, color2)
        },

吸气剂：

getters: {
        backgroundImage: () => (color1, color2) =>{
            let bgImage =
                'linear-gradient(to top right, ' + color1 + ',' + color2 + ')';
            return bgImage;
        }

    }

但是当我现在运行它时，出现此错误

Error in render: "RangeError: Maximum call stack size exceeded"

不确定我做错了什么，或者这是否是在Vuex中处理此类功能的正确方法？

最佳答案

调用堆栈错误是由以下计算的调用本身的递归引起的：

backgroundImage() {
  return this.backgroundImage(color1, color2) // <-- calling itself recursively
}

尝试以下方法：

backgroundImage() {
  return this.$store.getters.backgroundImage;
}

现在，计算出来的将调用吸气剂而不是自身。请注意，它返回的是不执行getter的方法，因为您在模板中调用它时已经这样做了。

这是一个demo