spread syntax (...) 究竟如何与 mapGetters 一起工作？

Question

每当你想将计算的 getter 与 Vuex 的 mapGetter 助手一起使用时，你可以像这样使用它：

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

我曾见过扩展运算符用于扩展数组以用作函数参数，但不是在我们在 mapGetters 示例中看到的方法前面。

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

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

什么都没有。这种语法和这种情况到底是如何工作的，有人可以提供一些关于这个的文档吗？

Answer 1

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

在 Spread in object literals 部分下。

Answer 2

我试图用我认为被遗漏的细节来澄清 Val 的回应。在您的示例中，未使用扩展运算符 "in front of a method"。实际发生的是它被应用于 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

Answer 3

mapGetters 和 mapActions 基本上是 vuex 提供的一个助手，returns 一个对象，键作为方法名称，值作为具有一些已定义定义的方法。当与 ...（对象扩展运算符）结合使用时，该对象将其分别扩展到计算对象或方法对象中的各个函数中。

例如：-

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

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

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

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

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

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

Answer 4

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

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

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

以上两者做的完全一样！

但是当你有任何本地计算属性时，你就需要 Spread Syntax。它是因为 mapGetters returns 一个对象。然后我们需要 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。看一看你就明白了。

spread syntax (...) 究竟如何与 mapGetters 一起工作？

How exactly does the spread syntax (...) work with mapGetters?

javascript

ecmascript-6

vue.js

vuex

spread-syntax