The basics of mapState (it's not as hard as it looks)

If there is one thing that I see developers looking into Vuex getting hung up on the most, it's these weird map functions that are in Vuex. The syntax is just so damn weird. What the hell are these ... things doing? Why do I need them sometimes and not others?

The Vuex docs seem to assume a lot here, mainly that you're already a JavaScript guru and secondly that you've heard of a spread operator which is an operator so rarely used in JavaScript that you may have never seen it before.¹

To explain all of these concepts, I'm going to pull up a simple example.

Imagine, if you will, that we have a Vue component that shows a user's name in the UI:

<template>
    <h1>{{ honorific }} {{ firstName }} {{ lastName }}</h1>
</template>

<script>
    export default {
        name: 'show-name',
        computed: {
            honorific() {
                return this.$store.state.honorific;
            },
            firstName() {
                return this.$store.state.firstName;
            },
            lastName() {
                return this.$store.state.lastName;
            }
        }
    }
</script>

And a Vuex store with the following state:

state: {
    honorific: 'Mr.',
    firstName: 'Johnny',
    lastName: 'Bravo'
}

When the Vuex store is passed into the Vue component, the component will use the value from the firstName from the Vuex store as a computed property called firstName. So when the UI references firstName, it will get the value from the store. Same, of course, for lastName and honorific.

This is such a common thing to do that Vuex decided that they would make a helper method to make this easier. If all of your values come from the Vuex store for your component, you can replace all the boiler plate above with this:

<script>
    import {mapState} from 'vuex';
    export default {
        name: 'show-name',
        computed: mapState(['honorific', 'firstName', 'lastName'])
    }
</script>

That's a lot less typing! But what is it doing?

What's happening is that mapState() is returning an object that has all of that previous code already filled out. All the functions get set up for us, so all we need to do is pass them straight to computed.

In other words, this:

mapState(['honorific', 'firstName', 'lastName'])

Returns this:

{
    honorific() {
        return this.$store.state.honorific;
    },
    firstName() {
        return this.$store.state.firstName;
    },
    lastName() {
        return this.$store.state.lastName;
    }
}

computed is already expecting an object full of functions, so it takes those and uses them. This is Vuex trying to be helpful! Thanks, Vuex!

But what happens when we have other computed properties? If mapState() is returning an entire object, we aren't able to do this:

<script>
    import {mapState} from 'vuex';
    export default {
        name: 'show-name',
        computed: {
            fullName() {
                return this.firstName + ' ' + this.lastName;
            },
            mapState(['honorific', 'firstName', 'lastName'])
        }
    }
</script>

mapState() is returning an entire object, so the above code is equivalent to:

<script>
    import {mapState} from 'vuex';
    export default {
        name: 'show-name',
        computed: {
            fullName() {
                return this.firstName + ' ' + this.lastName;
            },
            {
                honorific() {
                    return this.$store.state.honorific;
                },
                firstName() {
                    return this.$store.state.firstName;
                },
                lastName() {
                    return this.$store.state.lastName;
                }
            }
        }
    }
</script>

And, yuk, that's not right at all. In fact, it won't even run and you should get a big, ugly error message on the screen. This is because computed is expecting an object with functions, not an object embedded in another object that has functions. That's just bad syntax.

What we want to do it take those functions out of the object and put them in the computed object.

Well, you can. Modern versions of JavaScript have an operator called the spread operator and it's that strange ... you see in some of the documentation. Putting ... before the mapState() method says to take each thing in the object returned and put it right here. Rip it out of that object and put it in this one right here. In our example, it turns this:

<script>
    import {mapState} from 'vuex';
    export default {
        name: 'show-name',
        computed: {
            fullName() {
                return this.firstName + ' ' + this.lastName;
            },
            ...mapState(['honorific', 'firstName', 'lastName'])
        }
    }
</script>

Into this:

<script>
    import {mapState} from 'vuex';
    export default {
        name: 'show-name',
        computed: {
            fullName() {
                return this.firstName + ' ' + this.lastName;
            },
            honorific() {
                return this.$store.state.honorific;
            },
            firstName() {
                return this.$store.state.firstName;
            },
            lastName() {
                return this.$store.state.lastName;
            }
        }
    }
</script>

And now we have a valid object of functions.

TL;DR

To recap:

If you have no other computed properties, use this:

computed: mapState()

Otherwise, use this:

computed: {
    otherProperty() {
        return 'value';
    },
    ...mapState()
}

That's it. It is here to make your life easier, not more confusing. Hopefully now, it can do that for you.

1. It's also really new. Edge doesn't even really support it yet. This is why it's important to use something like Babel that can help these poor, lowly browsers play better with newer syntax. ↩