Use Mapping Helpers and Vuex Store State

In Vue components, the Vuex store can be accessed directly using this.$store. It’s not a big deal in small applications, but in larger applications where components can become quite large, we should use mapping helpers like mapGetters, mapActions, and mapMutations rather than getting state, dispatching actions, and committing mutations via this.$store. It does require that we write more code, but the trade-off is worth it. These helpers make it much easier to determine what parts of the Vuex store a component relies on.

If a component has many computed properties, methods, and so on, then we need to check each to determine if anything from the Vuex store is used. A glance at the top of our computed properties and methods with mappers will give us the answer. It’s also a good idea to spread mapGetters above computed properties and mapActions/mapMutations above methods.