Могу ли я использовать "this" в распространении mapMutations внутри методов экземпляра Vue?

Question

Я хочу установить мутации Vuex следующим образом:

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

Но я ловлю ошибку:

Uncaught TypeError: Невозможно прочитать свойство store из неопределенного

Как правильно использовать реквизит внутри имени мутации модуля?

Я хочу на карту this.$store.commit('form1/changeModel'), где form1 устанавливается из реквизита.

Answer 1

Я думаю, что нет способа связать это с mapActions. Но вы можете позвонить с $store.dispatch

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

Answer 2

Vuex помощник mapMutations может использоваться с функцией, которая работает с this,

Похоже, что для этого нет документа, но шаблонный тест Vuex helpers.spec.js иллюстрирует шаблон.

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

В качестве бонуса функция позволяет передавать параметр в мутацию, что является распространенным требованием.

Ваши изменения кода будут:

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

Звонок внутри вашего компонента просто changeModel() - mapMutations заботится о введении commit параметр.

Обратите внимание, я не уверен, что это добавляет много кроме некоторого дополнительного шума (по сравнению с простым this.$store.commit()), но, возможно, ваше требование сложнее, чем пример кода.

Answer 3

Это не то решение, о котором вы просили, но его эффект тот же. Поскольку мутация является переменным параметром, очевидно, что вместо изменения имени мутации его можно поместить в функцию в качестве входного параметра. Я хотел бы создать действие в магазине, как это:

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

И я бы использовал это действие в компоненте, передавая в него mutationName.