Learn how Mapping Works In VueX
Tags: vue, javascript, tutorial
Published: 2021-05-24 12:14:27

_by author [Samaila Bala](https://blog.asayer.io/authors/samaila-bala)_

Managing state in Vue applications can be difficult especially when there are so many moving parts in your application. [Vuex](https://vuex.vuejs.org/) 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](https://blog.asayer.io/vuex-state-management-for-vue-projects) 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


```javascript=
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
  state: {
    products: [],
  },
  mutations: {
    setProduct() {},
  },
  getters: {
    getProduct() {},
  },
  actions: {
    FETCH_PRODUCTS() {}
  },
});
```
    

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


```javascript=
computed: {
    getProducts(){
      return this.$store.state.products
    }
}

```

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:


```javascript=
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
  state: {
    products: [],
    cart: [],
    notifications: []
    product: null
  },
  mutations: {
    setProduct() {},
    setCart() {},
    setNotificationStatus(id) {}
  },
  getters: {
    getProduct() {} 
    getCartTotalPrice() {},
    getCartItemTotal() {}
    getNotifications() {}
  },
  actions: {
    SET_PRODUCT() {},
    SET_CART() {},
    FETCH_PRODUCTS(){},
    SET_NOTIFICATION_STATUS() {}
  },
});
```


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


```javascript=
computed: {
  getProducts(){
.    return this.$store.state.products
  }
  getCart(){
    return this.$store.state.cart
  }
  getProduct(){
    return this.$store.state.product
  }
  getNotifications(){
    return this.$store.state.notifications
  }
  getCartTotalPrice(){
    return this.$store.getters.getCartTotalPrice
  }
  getCartItemTotal(){
    return this.$store.getters.getCartItemTotal
  }
},

methods: {
   setProduct: function() {
      this.$store.commit('setProduct');
    },
    setCart: function() {
      this.$store.commit('setCart');
    },
    setNotificationStatus: function(notificaionId) {
      this.$store.commit('setProduct', notificationId);
    }
    fetchProducts: function() {
      this.$store.dispatch('FETCH_PRODUCTS');
    }
}
```


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. 


```javascript=
import { mapState } from 'vuex'

export default{
    computed: {
        ...mapState([
            'products','product','cart','notifications'
        ])
    }
}
```


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


```javascript=
import {mapState} from 'vuex'

export default{
    computed: {
        ...mapState({
          // using an arrow function
          productList: (state) => state.products,
          // passing the string value is the same as state => state.cart
          cartList: 'cart'
        })
    }
}
```


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


```javascript=
computed: {
  getProducts(){
    return this.$store.state.products
  }
  getCart(){
    return this.$store.state.cart
  }
  getProduct(){
    return this.$store.state.product
  }
  getNotifications(){
    return this.$store.state.notifications
  }
},
```


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:


```javascript=
import {mapGetters} from 'vuex'

export default{
    computed: {
        ...mapGetters([
            'getProduct' ,
            'getCartTotalPrice',
            'getCartItemTotal',
            'getNotifications'
        ])
    }
}
```


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


```javascript=
import {mapGetters} from 'vuex'

export default{
    computed: {
        ...mapGetters({
            singleProduct: 'getProduct' ,
            cartTotalPrice: 'getCartTotalPrice',
            cartTotalItems: 'getCartItemTotal',
            notifications: 'getNotifications'
        })
    }
}
```



## 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


```javascript=
methods: {
    setProduct: function(todo) {
      this.$store.commit('setProduct');
    },
    setCart: function(todo) {
      this.$store.commit('setCart');
    },
    setNotificationStatus: function(notificationId) {
      this.$store.commit('setProduct', notificationId);
    }
  }
```


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


```javascript=
import { mapMutations } from 'vuex';
export default {
  methods: {
    ...mapMutations([
      'setProduct', // maps this.setProduct to this.$store.commit('setProduct')
      'setCart', // maps this.setCart to this.$store.commit('setCart')
      // this accepts a payload
      'setNotificationStatus', // maps this.setCart to this.$store.commit('setNotificationStatus', notificationId),
    ]),
  },
};
```


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


```javascript=
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations({
      addProduct: 'setProduct',
      addProductToCart: 'setCart',
      markNotification: 'setNotificationStatus', // this accepts a payload,
    }),
  },
};
```



## 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


```javascript=
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions([
      'SET_PRODUCT', // maps this.SET_PRODUCT() to this.$store.dispatch('SET_PRODUCT')
      'SET_CART', // maps this.SET_CART() to this.$store.dispatch('SET_CART')
      'FETCH_PRODUCTS', // maps this.FETCH_PRODUCTS() to this.$store.dispatch('FETCH_PRODUCTS'),
    ]),
  },
};
```


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


```javascript=
import { mapActions } from 'vuex';
export default {
  methods: {
    ...mapActions({
      setProduct: 'SET_PRODUCT',
      setCart: 'SET_CART',
      fetchProducts: 'FETCH_PRODUCTS', 
    }),
  },
};
```


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


```html
<button v-on:click="setCart">Add to Cart</button>
```
    
## 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.