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

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

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

Но я поймаю ошибку:

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

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

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

Ответ 1

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

Кажется, что для этого не существует документа, но тестовый файл справки Vuex.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()), но, возможно, ваше требование более сложное, чем примерный код.

Ответ 2

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

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

Ответ 3

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

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

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