How to access Vuex module getters and mutations?

Question

I'm trying to switch to using Vuex instead of my homegrown store object, and I must say I'm not finding the docs as clear as elsewhere in the Vue.js world. Let's say I have a Vuex module called 'products', with its own state, mutations, getters, etc. How do I reference an action in that module called, say, 'clearWorking Data'? The docs give this example of accessing a module's state:

store.state.a // -> moduleA's state

But nothing I can see about getters, mutations, actions, etc.

Answer 1

In Addition to the accepted answer I wanna provide you with a workarround for the getter which is missing in the answer.

Debug the Store
In any case you can call console.log(this.$store) to debug the Store.
If you do so you will see the getters are prefixed with the namespace in their name.

Access namespaced getter

this.$store.getters['yourModuleName/someGetterMethod']

Dispatch namespaced

this.$store.dispatch('yourModuleName/doSomething')

Dispatch namespaced with params

this.$store.getters['yourModuleName/someGetterMethod'](myParam)

Conclusion
The key is to handle the namespace like a file System like Justin explained.

Edit: found a nice library for handling vuex Store
In addition to the basic knowledge I'd like to add this vuex library as a nice addition for working effectivly and fast with the vuex store. https://github.com/davestewart/vuex-pathify .
It looks pretty interesting and cares much of the configuration for you and also allows you to handle 2waybinding directly with vuex.

** Edit: Thanks to the other Answers. Added Dispatching method with params for wholeness.

Answer 2

In your example it would be store.dispatch('products/clearWorkingData') you can think of actions/mutations as a file system in a way. The deeper the modules are nested the deeper in the tree they are.

so you could go store.commit('first/second/third/method') if you had a tree that was three levels deep.

Answer 3

As another addition to the accepted answer, if you need to pass parameter(s) to the getter (for instance to fetch a specific item from the store collection), you need to pass it as follows:

this.$store.getters['yourModuleName/someGetterMethod'](myParam)

I don't think I like this notation very much, but it is what it is - at least for the moment.

Answer 4

Try this approach!

getCounter(){
  return this.$store.getters['auth/getToken'];     
}

auth is my module name and getToken is my getter.

Answer 5

Using Vuex mapGetters and mapActions you can now do this pretty easily. But I agree, it still isn't very obvious in the documentation.

Assuming your store module 'products' has a getter called 'mostPopular' and an action called 'clearWorkingData':

<template>
 <div>
  <p>{{mostPopularProduct}}<p>
  <p><button @click="clearProductData">Clear data</button></p>
 </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";

export default {
 computed: mapGetters({
  mostPopularProduct: "products/mostPopular"
 }),
 methods: mapActions({
  clearProductData: "products/clearWorkingData"
 })
}
</script>

Answer 6

The mapGetters helper simply maps store getters to local computed properties:

    import { mapGetters } from 'vuex'

    export default {
  // ...
  computed: {
    // mix the getters into computed with object spread operator
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
If you want to map a getter to a different name, use an object:

    ...mapGetters({
  // map `this.doneCount` to `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

Answer 7

You have to be aware of using namespaced: true when configuring particular store object

Answer 8

In Addition to the accepted answer, I feel it's not a good idea to mutate the state and commit the mutation directly in component. Thumb rule I follow is, Always use an action to commit the mutation and state only mutate inside mutations. Use getters to get a transformed state.

Getters can be mapped to computed using mapGetters and actions can be mapped to methods using mapActions as below example

// component.vue
// namespace_name=products

<template>
  <div>
    <p> This is awesome product {{getRecentProduct}} </p>
  </div>
  <button @click="onButtonClick()"> Clear recent</button>
</template>
<script>
import { mapGetters, mapActions } from "vuex";

export default {
  computed: {
    ...mapGetters({
        getRecentProduct: "products/getRecentProduct",
    }),
    anotherComputed(){
        return "anotherOne"
    }
  },
  methods: {
     ...mapActions({
        clearRecentProduct: "products/clearRecentProduct",
    }),
    onButtonClick(){
        this.clearRecentProduct(); /// Dispatch the action 
    },
    anotherMethods(){
        console.log(this.getRecentProduct); // Access computed props
    }
  }
};
</script>

Answer 9

Here's how you can access vuex Getters & Mutations using Composition API (setup)

<script setup>
import { useStore } from 'vuex'

const store = useStore();

var value = store.getters['subModuleName/getterMethod'];

store.commit['subModuleName/MutationMethod'];

</script>