태태개발일지 - Vue js mapMutations

mapMutations

vuex는 state , getter, mutation, actions 로 나뉜다. 앞서 state를 쉽게 mapState를 통해 가져오는 것을 보았으니, 이번에는 Mutation를 가져오는 방법을 봐보겠다.

 

 import { mapMutations, mapState } from 'vuex';
 
 
 methods:{
    ...mapMutations(['addOneItem']), // Vuex mutation 매핑
    addTodo() {
      if (this.newTodoItem !== '') {
        this.addOneItem(this.newTodoItem); // Vuex mutation 호출
        this.clearInput(); // 입력 필드 초기화
      } else {
        this.showModal = true; // 경고 모달 표시
      }
    },

 

위와 같이 import를 하고 methods: {

 ...mapMutations를 통해서 가져올 수 있다.

}

 

이렇게 되면 addTodo()에서 this.addOneItem으로 바로 불러와서 사용할 수 있다.

 

helpers를 사용하지 않았다면,

return this.$store.state.todoItems; 이렇게 가독성이떨어지고 불편하게 사용해야한다.

 

만약 Mutation과 이름이 다르다면,

removeTodo: 'removeOneItem',

 

다음 과 같이 선언하여 사용하면 된다.