How to access Vuex module getters and mutations?

In Vue.js applications, Vuex serves as a centralized state management library. When implementing a modular Vuex store, each module can have its own state, mutations, actions, and getters. The following outlines methods for accessing getters and mutations within Vuex modules:

1. Accessing Getters

Consider a Vuex module named user that defines a getter fullName. To access this getter in a Vue component, you can use the mapGetters helper function or directly access it via the $store.getters property. The following provides examples of both approaches:

Using mapGetters Helper Function:

javascript
import { mapGetters } from 'vuex';

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

Here, the first argument of mapGetters is the module name user, and the second argument is an array containing the getter names to be mapped to the component's computed properties.

Direct Access:

javascript
export default {
  computed: {
    fullName() {
      return this.$store.getters['user/fullName'];
    }
  }
}

2. Triggering Mutations

Assume the user module contains a mutation updateName. The methods to trigger this mutation in a Vue component are as follows:

Using mapMutations Helper Function:

javascript
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations('user', ['updateName'])
  }
}

In this example, mapMutations maps the updateName mutation from the user module to the component's methods.

Direct Mutation Submission:

javascript
export default {
  methods: {
    updateName(newName) {
      this.$store.commit('user/updateName', newName);
    }
  }
}

Both methods can be employed to access or trigger getters and mutations within Vuex modules in Vue components. This modular approach contributes to maintaining clarity and organization in large-scale applications.