如何在Vuex中给Getter传递两个参数？栈溢出报错求解

首先，咱们先揪出导致Maximum call stack size exceeded的元凶——无限递归！你在computed里定义的backgroundImage属性，返回的是this.backgroundImage(color1, color2)，这里的this.backgroundImage就是这个computed属性本身啊！每次访问这个computed，它都会调用自己，没完没了，浏览器的调用栈直接被撑爆了。

接下来咱们一步步修复，顺便理清这种场景下Vuex的正确用法：

1. 修复递归问题，正确使用Vuex函数式Getter #

你的Vuex Getter写法其实是对的——函数式Getter（返回一个函数）适合这种需要传参的场景。但不需要额外用computed包裹，直接在模板里调用就行：

方法一：直接在模板中调用$store.getters #

修改模板代码，直接调用Vuex getter返回的函数：

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

方法二：用mapGetters映射后调用 #

如果习惯用辅助函数，先映射getter，再在模板里调用：

// 组件脚本部分
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['backgroundImage'])
  }
}

模板里直接调用这个映射后的函数：

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

2. 思考：是否真的需要Vuex？ #

其实生成渐变背景字符串这个逻辑，如果只是在当前组件用，完全没必要放到Vuex里，直接写个组件方法更简单：

// 组件脚本的methods里
methods: {
  backgroundImage(color1, color2) {
    return `linear-gradient(to top right, ${color1}, ${color2})`
  }
}

模板调用方式和上面一样，这样代码更简洁，也避免了Vuex的额外开销。只有当这个渐变生成逻辑需要在多个组件共享时，才需要放到Vuex Getter里。

补充：Vuex函数式Getter的小细节 #

函数式Getter每次调用都会执行，不会像普通Getter那样缓存结果（因为参数可能不同），所以如果是复杂计算需要缓存的话，可能需要自己处理，但这个场景下完全没问题。

内容的提问来源于stack exchange，提问作者Matt B