关于使用扩展运算符获取actions的原因及场景差异疑问

首先得搞清楚mapActions到底在做什么——它是Vuex提供的一个辅助函数，核心作用是帮你把Vuex store里的action，快速映射成组件methods里的方法。当你调用mapActions(["fetchImages"])时，它会返回一个这样的对象：

{
  fetchImages: function(...args) {
    return this.$store.dispatch('fetchImages', ...args)
  }
}

现在来拆解你提到的两种写法：

为什么methods:{ mapActions(["fetchImages"]) }（实际有效写法应为methods: mapActions(["fetchImages"])或methods: { ...mapActions(["fetchImages"]) }）能生效？ #

严格来说，你写的methods:{ mapActions(["fetchImages"]) }是存在语法问题的，真正有效的两种写法逻辑如下：

• 第一种是直接把mapActions的返回值赋值给methods：因为mapActions本身返回的就是一个符合methods格式的对象，直接赋值相当于让组件的methods完全由这个映射对象填充；
• 第二种是用扩展运算符展开：methods: { ...mapActions(["fetchImages"]) }，它把mapActions返回对象里的所有方法“展开”到新的methods对象中。当只有这一个映射时，两种写法效果完全一致，所以有时候会有人省略扩展运算符直接赋值。

为什么添加其他属性（比如a:10）后必须用扩展运算符？ #

当你想在methods里同时包含mapActions映射的方法和自定义属性/方法时，需要创建一个合并后的对象。但JS对象字面量的语法要求每个成员都必须是key: value的形式，你不能直接把mapActions(["fetchImages"])这样的函数调用放在对象里——这完全不符合语法规则。

这时候扩展运算符...就派上用场了：它可以把mapActions返回对象里的所有属性（也就是映射后的fetchImages方法）“展开”到当前的methods对象中，同时你可以无缝添加自己的属性/方法。正确的写法应该是：

methods: {
  ...mapActions(["fetchImages"]),
  a: 10
}

这样既符合对象字面量的语法，又完成了映射方法和自定义属性的合并，Vue才能正确识别所有内容。

简单总结：

• 当methods只需要mapActions生成的方法时，直接赋值或用扩展运算符展开都能生效；
• 当需要合并自定义内容时，必须用扩展运算符把映射对象展开到methods里，才能完成合法的对象合并。

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