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

Question

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?

Solution 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

Solution 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

Solution 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.

Solution 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 mapGetters 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 objects
  ...mapGetters(['cartItems', 'cartTotal', 'cartQuantity']),
}

The same happens to mapActions, mapState.

You can read more about Spread in object literals in MDN

Basically, in this situation, it used to merge objects

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

Actually the Vuex Docs explains this quite clear, but not in mapGetters but the first thing: mapState. Take a look and you will get the idea.

View more solutions