programing

Vuex - 네임스페이스 + mapMutations + 함수?

randomtip 2022. 7. 16. 15:19
반응형

Vuex - 네임스페이스 + mapMutations + 함수?

아래 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

좋은 생각 있어요?

실제로는 돌연변이를 매핑하는 것이 아니라 커밋하는 함수를 추가하는 것이기 때문에 당신의 경우에는 작동하지 않습니다.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

언급URL : https://stackoverflow.com/questions/56119169/vuex-namespace-mapmutations-functions

반응형