Vue.js is a powerful front end JavaScript framework for creating SPAs and user interfaces.It is built based on model-view-view architecture. Vue has a library of components that are used by mapping applications. Mapping enables you to bind any of the state’s properties like getters, mutations, actions, state to computed property in the component and then use the data directly from the state. A Vuex state makes use of data within these properties in the store. Mapping is a good way to retrieve data from them. Here is an example.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    data: "test data"
  }
  }

To get the value of data from the State do as shown in the given below code snippet.

computed: {
        getData(){
          return this.$store.state.data
        }
    }

This code will work for sure but it will get messy as the data gets bigger. We will look at a better way to retrieve the data.  The below given code will map the state to computed property in the component.

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
        ])
    }
}

Now you can access entire user objects in the component. Here is an example of adding objects from state to the mapState method.

import { mapGetters } from 'vuex';

export default{
    computed: {
        ...mapState([
            'user',
            'services'
        ])
    }
}

Now you can easily access the username.

{{user.data.name}}

You should always map only when you have a lot of data in the state and need all the data in the component. Here is an example of mapping getters. It is similar to mapState.

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'firstCount',
      'anotherGetter',
    ])
  }
}

You can pass in an object to mapGetters if you want to use a different name.

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      first:'firstCount',
      another:'anotherGetter',
    ])
  }
}

To commit a mutation use the following syntax.

this.$store.commit('mutationName`)

Example:

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'search', // map `this.increment()` to `this.$store.commit('search')`

      // `mapMutations` also supports payloads:
      'searchBy' // map `this.incrementBy(amount)` to `this.$store.commit('searchBy', amount)`
    ]),
    ...mapMutations({
      find: 'search' // map `this.add()` to `this.$store.commit('search')`
    })
  }
}

Mapping actions is done in the method like in mutations.

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // map `this.increment()` to `this.$store.dispatch('increment')`

      // `mapActions` also supports payloads:
      'incrementBy' // map `this.incrementBy(amount)` to `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // map `this.add()` to `this.$store.dispatch('increment')`
    })
  }
}