Can I use "this" in mapMutations spread inside Vue instance methods? Can I use "this" in mapMutations spread inside Vue instance methods? vue.js vue.js

Can I use "this" in mapMutations spread inside Vue instance methods?


I think there is no way to bind this on mapActions. But you can call it with $store.dispatch

methods: {  changeModel() {    this.$store.dispatch(`${this.store}/changeModel`);  }}


Vuex helper mapMutations can be used with a function which works with this.

There does not seem to be a doc for this, but the Vuex unit test helpers.spec.js illustrates the pattern.

const vm = new Vue({  store,  methods: mapMutations({    plus (commit, amount) {      commit('inc', amount + 1)    }  })})

As a bonus, the function allows passing a parameter to the mutation, which is a common requirement.

Your code changes would be:

export default {  props: {    store: String  },  methods: {    ...mapMutations({      changeModel(commit) { commit(`${this.store}/changeModel`) }    })  }}

The call within your component is just changeModel() - mapMutations is taking care of injecting the commit parameter.

Note, I am not sure this is adding much except some extra noise (compared to a simple this.$store.commit()), but perhaps your requirement is more complicated than the example code.


It is not exaclty the solution that you asked but its effect is the same. As the mutation is a variable parameter, it is obvious to put it into a function as an input parameter instead of changing the mutation name. I would create an action in the store like this:

changeModel ({dispatch, commit, rootGetters}, mutationName) { commit(`${mutationName}/changeModel`, {}, {root: true})})

And I would use this action in the component passing the mutationName into it.