loading...
Cover image for The basics of mapState (it's not as hard as it looks)

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

firstclown profile image Joe Erickson Originally published at jerickson.net ・3 min read

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

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>
Enter fullscreen mode Exit fullscreen mode

And a Vuex store with the following state:

state: {
    honorific: 'Mr.',
    firstName: 'Johnny',
    lastName: 'Bravo'
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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'])
Enter fullscreen mode Exit fullscreen mode

Returns this:

{
    honorific() {
        return this.$store.state.honorific;
    },
    firstName() {
        return this.$store.state.firstName;
    },
    lastName() {
        return this.$store.state.lastName;
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

And now we have a valid object of functions.

TL;DR

To recap:

If you have no other computed properties, use this:

computed: mapState()
Enter fullscreen mode Exit fullscreen mode

Otherwise, use this:

computed: {
    otherProperty() {
        return 'value';
    },
    ...mapState()
}
Enter fullscreen mode Exit fullscreen mode

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. 

Discussion

pic
Editor guide