Vuex mapMutations isn't working as expected

Question

I have a namespaced store (namespaced: true) and I'm trying to access it via mapMutations. When I call it via mapMutations it results in a 'not a function' error. When I call it directly via this.$store it works fine. Why does the mapMutations version not work? Pseduo-code is shown below. FWIW I'm using the latest Vue/Vuex versions.

import { mapGetters, mapMutations } from 'vuex'

computed: {
  ...mapGetters('someModule', ['foo']),
  ...mapMutations('someModule', ['bar']),
}
mounted() {
   this.$store.commit('someModule/bar'); // This works
   this.bar(); // This gives me a "this.bar() is not a function" error
   this.baz();
}
methods: {
  baz() {
   this.bar(); // This gives me a "this.bar() is not a function" error
  },
}

Satyam Pathak · Accepted Answer · 2019-08-20T13:58:07.127

2

Mutation/Actions are function which stay inside methods

...mapMutations('someModule', ['bar']),

Should be inside methods

methods: {
  ...mapMutations('someModule', ['bar']),
  executeBar() {
     this.bar()
   }
}

For more info and comparison between methods and computed see this Method vs Computed in Vue

edited Aug 20 '19 at 13:58

answered Aug 20 '19 at 12:24

Satyam Pathak

6,612
3
25
52

I tried putting it in the method and I get the same error. Code is updated above – ekjcfn3902039 Aug 20 '19 at 12:34
1

@ekjcfn3902039 It's your call to `mapMutations` that needs to move into the `methods`. So `methods: { ...mapMutations('someModule', ['bar']) }`. – skirtle Aug 20 '19 at 12:41
Yep @skirtle, that was it. Thanks! – ekjcfn3902039 Aug 20 '19 at 12:43
ahh Thanks @skirtle I missed to add the line inside methods. – Satyam Pathak Aug 20 '19 at 13:58

Vuex mapMutations isn't working as expected

1 Answers1