The basics of mapState (it's not as hard as it looks)
Tags: vue, vuex, javascript, webdev
Published: 2019-11-20 15:22:23

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) which is an operator so rarely used in JavaScript that you may have never seen it before.[^1]

[^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.

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:

``` HTML
<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:

``` JavaScript
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:

``` HTML
<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:

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

Returns this:

``` JavaScript
{
    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:

``` HTML
<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:

``` HTML
<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:

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

Into this:

``` HTML
<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:

``` JavaScript
computed: mapState()
```

Otherwise, use this:

``` JavaScript
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.