扩展语法 (...) 如何与 mapGetters 一起工作？答案

【问题标题】：How exactly does the spread syntax (...) work with mapGetters?扩展语法 (...) 如何与 mapGetters 一起工作？
【发布时间】：2018-06-13 23:20:12
【问题描述】：

当你想通过 Vuex 的 mapGetter 助手使用计算 getter 时，你可以像这样使用它：

...mapGetters([
    'getter1', 
    'getter2', 
    'etc'
])

我已经看到之前使用扩展运算符来扩展数组以用作函数参数，但不是在我们在mapGetters 示例中看到的方法前面。

例如，在查看 mozilla 文档时，我也找不到这种语法的示例：

https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator

什么都没有。这种语法究竟是如何工作的，这种情况下，有人可以提供一些关于这方面的文档吗？

【问题讨论】：

标签： javascript ecmascript-6 vue.js vuex spread-syntax

【解决方案1】：

mapGetters 和 mapActions 基本上是 vuex 提供的一个帮助器，它返回一个对象，其中键作为方法名称，值作为具有定义定义的方法。此对象与 ...(Object spread operator) 结合使用时，会将其分别展开为计算对象或方法对象中的各个函数。

例如：-

{
    computed: {
        ...mapGetters([
            'getter1',
            'getter2',
            'getter3'
        ]);
    }
}

{
    computed: {
        getter1() {
            return this.$store.getters.getter1;
        },
        getter2() {
            return this.$store.getters.getter2;
        },
        getter3() {
            return this.$store.getters.getter3;
        },
    }
}

以上两者是相同的，所以基本上它会返回一个定义对象 {getter1, getter2, getter3} 并分成具有相同名称的单独计算属性。

您也可以参考这些网址：-

https://www.youtube.com/watch?v=SaBnaGu7cP8&list=PL4cUxeGkcC9i371QO_Rtkl26MwtiJ30P2&index=8

https://vuex.vuejs.org/en/getters.html

【讨论】：

【解决方案2】：

我试图用我觉得被忽略的细节来澄清 Val 的回应。在您的示例中，没有在“方法前面”使用扩展运算符。实际发生的是它被应用于mapGetters的结果

你可以这样想：

{
    ...{
        getter1: /* a mapped fn from vuex store */,
        getter2: /* a mapped fn from vuex store */,
    }
}

您可以阅读 Val Cajes Luminarias 提供的文档，了解有关扩展运算符如何与对象文字一起使用的更多详细信息。 https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator

【讨论】：

【解决方案3】：

它用于将对象属性合并到另一个对象。它在文档中有说明。 https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator

在Spread in object literals 部分下。

【讨论】：

【解决方案4】：

实际上，当您没有任何本地计算属性时，您可以直接将mapGetters 用作：computed: mapGetters([/*...*/]，而不使用Spread Syntax ...。

computed: {
//nothing here - no any local computed properties
      ...mapGetters(['cartItems', 'cartTotal', 'cartQuantity']),
    },

computed: mapGetters(['cartItems', 'cartTotal', 'cartQuantity']),

以上两者的作用完全相同！

但是当您确实有任何本地计算属性时，您需要传播语法。这是因为 mapGetters 返回一个对象。然后我们需要 Object Spread Operator 将多个 Object 合并为一个。

computed: {
  localComputed () { /* ... */ },
  // we use ... Spread Operator here to merge the local object with outer objects
  ...mapGetters(['cartItems', 'cartTotal', 'cartQuantity']),
}

mapActions、mapState 也是如此。

您可以在 MDN 中阅读有关在对象文字中传播的更多信息

基本上，在这种情况下，它用于合并对象

let obj = {a: 1, b: 2, c: 3}
let copy = {...obj}
// copy is {a: 1, b: 2, c: 3}

//without ..., it will become wrong
let wrongCopy = {obj}
// wrongCopy is { {a: 1, b: 2, c: 3} } - not what you want

实际上Vuex Docs 解释得很清楚，但不是mapGetters，而是第一件事：mapState。看一看，你就会明白了。

【讨论】：