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

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

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