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?

Answer 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