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

Question

I want to set Vuex mutations as follows:

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

But I catch the error:

Uncaught TypeError: Cannot read property 'store' of undefined

How do I correctly use props inside the module mutation name?

I want to map this.$store.commit('form1/changeModel'), where form1 is set from props.

What's wrong with `...mapMutations(['changeModel'])`? Do you want to map `this.$store.commit('changeModel')` - or something else? — raina77ow, Aug 29 '18 at 20:07
I want to map `this.$store.commit('form1/changeModel')`, where `form1` is set from props. — mcmimik, Aug 29 '18 at 20:16
@mcmimik Why are you using mutations directly in your component instead of actions to begin with? — Bennett Dams, Sep 05 '18 at 15:18

score 3 · Answer 1 · answered Aug 31 '18 at 02:18

3

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`);
  }
}

answered Aug 31 '18 at 02:18

Jae Woo Woo

901
1
8
19

1

or even `this.$store.commit()` which is what you would use for a mutation – Phil Aug 31 '18 at 02:23

Richard Matsen · Accepted Answer · 2018-09-03T23:46:41.833

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.

Very nice. If you have the time, this would be a good documentation feature request to add to their issues list. — Phil, Sep 04 '18 at 00:11
[the API guide for mapMutations](https://vuex.vuejs.org/api/#mapmutations) does introduce this. — Sphinx, Sep 04 '18 at 18:12

score 1 · Answer 3 · answered Sep 05 '18 at 08:30

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.

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

3 Answers3

Linked