Могу ли я использовать "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

Vuex helper 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 2

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

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

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

Answer 3

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

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