mapGetters语法究竟如何运作?

时间:2018-01-04 08:51:55

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

每当你想使用带有来自Vuex的mapGetter帮助器的计算getter时,你会像这样使用它:

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

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

在查看mozilla文档时,我无法找到此语法的示例:

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

什么都没有。这个语法究竟是如何起作用的?这个案例可能有人提供了一些关于这个的文档吗?

4 个答案:

答案 0 :(得分:14)

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

例如: -

{
    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

答案 1 :(得分:2)

我试图澄清Val的回应,我觉得省略了细节。在您的示例中,扩展运算符未在“方法前”使用。实际发生的是它被应用于{ ...{ getter1: /* a mapped fn from vuex store */, getter2: /* a mapped fn from vuex store */, } }

的结果

你可以这样想:

{{1}}

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

答案 2 :(得分:2)

实际上,当您没有任何本地计算属性时,可以直接将ValueError: cannot reshape array of size 185649408 into shape (26859,224,224,3) 用作:mapGetters,而无需使用扩展语法computed: mapGetters([/*...*/]

...

以上两种功能完全相同!

但是当您确实具有任何本地计算属性时,则需要使用扩展语法。这是因为mapGetters返回了一个对象。然后我们需要对象传播运算符将多个对象合并为一个。

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

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

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

您可以在MDN

中了解有关在对象文字中传播的更多信息

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

mapState

实际上,Vuex Docs解释得很清楚,但不是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 ,而是第一件事:mapGetters。看看,您会明白的。

答案 3 :(得分:0)

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

Spread in object literals部分。