javascript - 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