Mapping Store Properties with Helper Functions

Vuex comes pre-packaged with helper functions that map your various store properties to component properties and functions. You will need to import them with ES6 modules. These helper functions can be extremely useful when your state tree becomes large and cluttered with nested properties. The Vuex helper functions can also simplify your code so it’s easier to read and understand.

Mapping State With mapState

The mapState helper method does what it sounds like; it “maps” or associates the state property with a local reactive property on the component level. In other words, you can essentially remove the $store.state or this.$store.state from your references and replace it with, this. You can think of these associations as aliases; they’re similar.

To map your state within a component, you need to extract and import the mapState function first.

import { mapState } from 'vuex';

The mapState helper function...