Vue 3中mapGetters映射多个Getter时失效问题求助

嘿，我看到你遇到的问题了，咱们来一步步拆解下：

核心问题：Getter里的this指向错误 #

你的getTotal getter里有个致命错误，导致它执行时会抛出异常——当你同时映射多个Getter时，这个异常会影响整个计算属性的正常工作；而只映射getBaskets时，getTotal不会被触发执行，所以看起来功能正常。

看这段有问题的代码：

getTotal(state){
  let total = 0;
  state.basket.forEach(x=> this.total += 1 * x.price)
  return total;
}

在Vuex的Getter函数中，this的指向并不是当前的Getter对象（严格模式下甚至是undefined），所以你写this.total的时候，相当于在访问一个不存在的变量，会直接导致getTotal计算失败，进而让整个computed块出问题。

修正后的代码 #

把this.total改成你声明的局部变量total就可以解决问题：

const getters = {
  getBaskets(state){
    return state.basket
  },
  getTotal(state){
    let total = 0;
    // 改用局部变量total，不要用this.total
    state.basket.forEach(x=> total += 1 * x.price)
    return total;
  }
}

另外，组件代码里还有个小语法错误：export default后面的分号是多余的，修正后：

<script>
import { mapGetters } from "vuex";
export default {
  computed:{
    ...mapGetters([
      'getBaskets',
      'getTotal'
    ]),
  }
</script>

额外优化建议 #

1. 把价格存为数字类型：你当前state里的price是字符串（比如"5"），虽然用1 * x.price可以转成数字，但最好直接在state里存数字，避免后续可能出现的类型问题：

const state = {
  pakets: [
    { id: 1, paketname: "Simple", price: 5 },
    { id: 2, paketname: "Silver", price: 10 },
    { id: 3, paketname: "Gold", price: 15 },
    { id: 4, paketname: "Platin", price: 25 },
  ],
  basket:[],
}

这样getTotal里可以直接写total += x.price，更简洁。

2. 用reduce替代forEach计算总价：数组的reduce方法更适合做累加计算，代码更简洁直观：

getTotal(state){
  return state.basket.reduce((total, item) => total += item.price, 0)
}

这样修改后，不管你映射多少个Getter，都能正常工作啦～

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