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

问题

Whenever you want to use a computed getter with the mapGetter helper from Vuex you would use it like so:

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

I have seen the spread operator used before to expand arrays to be used as function arguments, but not in front of a method like we see here with the mapGetters example.

I can't really find examples of this syntax either, when looking in mozilla documentation for example:

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

Nothing is there. How exactly does this syntax work and this case and could someone provide some documentation on this perhaps?

回答1:

mapGetters and mapActions are basically a helper provided by vuex which returns an object with keys as method names and values as methods with some defined definition. This object when combined with ...(Object spread operator) spreads it out into individual functions in the computed or methods object respectively.

For example:-

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

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

Both of the above are identical so basically it somewhat returns an object {getter1, getter2, getter3} of definitions and separates into individual computed properties with same name.

You can also refer to these urls :-

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

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

回答2:

I am attempting to clarify Val's response with details I feel were omitted. In your example, the spread operator is not being used "in front of a method". What is actually happening is it is being applied to the result of mapGetters

You can think of it like this:

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

You can read the documentation provided from Val Cajes Luminarias for more details on how the spread operator works with object literals. https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator

回答3:

It is used to merge object properties to another object. It's stated there in the docs. https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator

Under the Spread in object literals section.

回答4:

Actually, you can use directly mapGetters as: computed: mapGetters without Spread Syntax ... when you don't have any local computed properties.

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

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

Both of above do exactly the same thing!

But when you do have any local computed property, then you need Spread Syntax. It because the mapGetter returns an object. And then we need Object Spread Operator to merge multiple Objects into one.

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

The same happens to mapAction, mapState.

Actually the Vuex Docs explains this quite clear, but not in mapGetter but the first thing: mapState.

来源：https://stackoverflow.com/questions/48091687/how-exactly-does-the-spread-syntax-work-with-mapgetters

标签

javascript

ecmascript-6

Vue.js

vuex

spread-syntax