Back

Learn how Mapping Works In VueX

May 24th, 2021 · 3 min read

Managing state in Vue applications can be difficult especially when there are so many moving parts in your application. Vuex a state management library for Vue applications helps simplify that process but can also get cumbersome and bloat your codebase which brings us to mapping.

Mapping in Vuex helps you make use of multiple store properties (state, getters, actions, and mutations) in your Vue components. In this article we will be looking at how to use Mapping to map data from a Vuex store to Vue components.

This article assumes you have prior knowledge of Vue and Vuex. If not, I suggest you read this article I wrote to become more familiar with the primary concepts of Vuex.

Why Mapping?

As I already explained Vuex allows us to manage state in Vue applications and provides a central store to keep properties such as state, mutations, getters, and actions. Below is an example of a typical Vuex store

To access the items in state in our Vue components we make use of the computed property by doing this:

While this method for handling data seems efficient for most applications It has a drawback: when the application becomes larger (and because we have a centralized store) the code may become bloated when we introduce more data to our application. Check out the following example:

If we need all this data in a component our computed property becomes bloated as well:

Mapping allows us to structure the code better by binding the store properties (state, getters, mutations, and actions) to computed properties so we can use these properties directly in the state and save time.

In the next sections, we will look at how to use mapping to write less verbose code.

Mapping State

The state is a representation of our application at any point in time and contains data like objects, arrays, strings, etc. Vuex uses a single state tree to keep all our application-level states.

The question then becomes: What happens when we have “too much state” in our Vue components. Vuex provides a helper function called mapState to solve this problem. It is used for mapping state properties in the store to computed properties in our components.

The mapState helper function returns an object which contains the state in the store. This state can then be accessed in components by doing this {{products}}.

We can also provide aliases for the state returned by the mapState function by returning an object instead of an array like the example below

The snippet’s code is cleaner and more readable than creating individual methods like the example below to return state properties:

Notice that the mapState helper should only be used when you have lots of data in the state. This is to avoid memory and performance issues in the long run.

Mapping Getters

Mapping getters is similar to mapping state. Getters provide a way of getting a derived computed state from the store e.g a function that returns products based on popularity. Vuex also provides a mapGetters helper function to map getters to local computed properties. The example below shows how to use the mapGetters function:

The mapGetters function returns an object of getters from the store. You can also alias the getters by using an object instead of an array

Mapping Mutations

Mutations are what differentiate Vuex from other popular state management libraries as they help in changing state in the store by committing a mutation as opposed to using reducer functions. The example below shows how to commit a mutation

Mutations can also be mapped using the mapMutations helper function but unlike states and getters mutations are mapped to methods and not computed properties. The example below shows how to map a mutation

You can also alias the mutations by passing an object instead of an array

Mapping Actions

Mapping actions are very similar to mutations as actions are also mapped to the methods property and not the computed property. The major difference between actions and mutations is actions commit mutations and are asynchronous. The example below shows how it is used

You can also alias the actions by passing an object instead of an array to the mapActions function

Mapped mutations and actions can be used in templates the same way other mutations and actions are used. The example below shows how to use an action in a template

Conclusion

In this article, we looked at the concept of mapping in Vuex and how it can help you structure your code better. Something to note is that Mapping is beneficial when a component needs to use multiple store properties and should only be used for that.