Vuex - пространство имен + mapMutations + функции?

Question

Как использовать пространство имен с mapMutations ниже?

   methods: {
    addTodo() {
      this.$store.commit('todos/addTodo', this.text)
      this.text = ''
    }
   }

Я пытался с:

  methods: {
   ...mapMutations('todos', {
      addTodo () {
        this.$store.commit('addTodo', this.text)
        this.text = ''
      }
     })
   }

Я получаю эту ошибку:

commons.app.js:19729 [vuex] unknown mutation type: addTodo

Любые идеи

Answer 1

Это не работает в вашем случае, потому что вы фактически не отображаете какие-либо мутации, а добавляете функцию, которая фиксирует мутацию addTodo из неизвестного пространства имен.Изменение this.$store.commit('addTodo', this.text) на this.$store.commit('todos/addTodo', this.text) может решить вашу проблему, но все же это неправильный способ использования mapMutations.mapMutations должен позволять вам импортировать ваши мутации, а затем вызывать их как любой другой метод.Если вы хотите иметь какую-либо дополнительную логику, например, сбросить свойство text в вашем примере, вам придется заключить в коммит другой метод, как в примере ниже:

  methods: {
    ...mapMutations("todos", ["ADD_TODO"]),
    addTodo() {
      this.ADD_TODO(this.text);
      this.text = "";
    }
  }

Или с псевдонимом мутации:

  methods: {
    ...mapMutations("todos", { addTodoMutation: 'ADD_TODO' }),
    addTodo() {
      this.addTodoMutation(this.text);
      this.text = "";
    }
  }

https://codesandbox.io/s/yvjvll56oj