扩展运算符(...)结合Vuex的mapGetters具体如何工作？

阿华AIGC实验室

2026-5-15

关于Vuex中...mapGetters语法的解释

嘿，这个问题问得特别好！我当初第一次在Vuex里看到这种写法的时候，也和你一样困惑——毕竟之前只见过扩展运算符用来展开数组当函数参数对吧？别担心，咱们一步步拆解清楚：

首先，分清两种扩展运算符

你看到的...mapGetters([...])里的...，不是你熟悉的数组扩展运算符，而是对象扩展运算符（ES2018新增的特性）。这俩虽然长得一样，但作用场景完全不同：

数组扩展运算符：用来展开数组（或类数组对象），把元素一个个拿出来作为参数、数组元素等，比如Math.max(...[1,3,5])等价于Math.max(1,3,5)。
对象扩展运算符：用来展开一个对象的所有可枚举属性，把它们合并到另一个对象字面量里，相当于Object.assign()的简写形式。

然后，看`mapGetters`到底返回什么

Vuex的mapGetters辅助函数，当你传入一个数组（比如['getter1', 'getter2']）时，它会返回一个对象。这个对象的结构大概是这样的：

{
  getter1: function() {
    return this.$store.getters.getter1
  },
  getter2: function() {
    return this.$store.getters.getter2
  }
}

简单说，它把你传入的getter名称，转换成了对应访问store getter的计算属性函数。

最后，理解`...`在这里的作用

在Vue组件的computed选项里（计算属性本身就是一个对象），我们用...把mapGetters返回的对象里的所有属性，展开合并到当前的computed对象中。举个完整的例子：

export default {
  computed: {
    // 自定义的计算属性
    doubleCount() {
      return this.count * 2
    },
    // 用对象扩展运算符把mapGetters的结果合并进来
    ...mapGetters([
      'userName',
      'userAvatar'
    ])
  }
}

这段代码完全等价于手动编写每个getter对应的计算属性：

export default {
  computed: {
    doubleCount() {
      return this.count * 2
    },
    userName() {
      return this.$store.getters.userName
    },
    userAvatar() {
      return this.$store.getters.userAvatar
    }
  }
}

这样写的好处是当你需要引入很多getter时，不用重复写大量模板化的代码，非常简洁。