Simplifying with mapState and mapGetters

As one of the last features we'll cover with Vuex, let's look at mapState and mapGetters. These are handy utilities that help map state values and getters into your component's computed property. As a practical matter, it makes your HTML templates simpler. So instead of {{ $store.state.firstName }}, you can simply use {{ firstName }}. Instead of using {{ $store.getters.name }}, you can just use {{ name }}.

Both mapState and mapGetters can either take an array of values to map or an object where each key represents the name you wish to use in your component and the value is the state value or getter in the Vuex store. They are both used with your Vue application's computed block.

In this first example, two state values and three getters are mapped by their name alone:

mapState(["age", "rank", "serialNumber"]);
mapGetters(["name", "fiction", "nonfiction&quot...