Question

所以，不确定这是否是正确的解决方法，但是我正在尝试创建一个吸气剂，该吸气剂将基于通过函数传递给它的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中处理此类功能的正确方法？

Answer 1

将参数发送为对象：

ENTRYPOINT

触发您的操作（不在吸气剂中）

FROM ...
...
COPY start_service.sh start_service.sh
ENTRYPOINT ["sh", "./start_service.sh"]

或快捷方式

start_service.sh

实际上这是正确的设置：

bgImg() {
  return this.backgroundImage({color1: color1, color2: color2})
  return this.backgroundImage({color1, color2}) // or shortcut
}

您认为：

backgroundImage(payload) => {
  const {color1, color2} = payload
  return 'linear-gradient(to top right, ' + color1 + ',' + color2 + ')';
}

Answer 2

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

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

尝试以下方法：

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

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

这里是demo

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

2 个答案: