Vuex 9.mapMutations , mapActions

개요

mapMutations

• Vuex 에 선언 된 Mutations 속성을 컴포넌트에 더 쉽게 Mapping 해주는 헬퍼

//사용.vue
import {mapMutations} from 'vuex'

methods: {
	...mapMutations({clickBtn:'clickBtn'}),
    authLogin() {},
    displayTable() {}
}

//store.js
mutations: {
	clickBtn(state) {
    	alert(state.msg);
    }
}

//template

<button @click="clickBtn"> popup message</button>

mapActions

• Vuex 에 선언 된 Actions 속성을 컴포넌트에 더 쉽게 Mapping 해주는 헬퍼

//사용.vue

import {mapActions} from 'vuex'

methods: {
 ...mapActions({
 	delayClickBtn : 'delayClickBtn'
 })
}

//store.js
actions: {
	delayClickBtn(context) {
    	setTimeout( () => context.commit('clickBtn'), 2000);
    }
}

//template

<button @click="delayClickBtn"> delay popup message</button>

 

 

---

 사용

• 이벤트에서 넘겨주는 인자를 바탕으로 name 의 이름을 가진 메서드가 자동으로 선언 됨
• 객체 전개 연산에서 꺼내온 value 값의 Vuex.Store 에 기술된 Mutations 메서드가 호출되는 형태

<script>
import {mapGetters, mapMutations} from 'vuex'

export default {
  //...
  
  methods: {
    // removeTodo (todoItem,index) {
    //   const itemInfo = {todoItem,index}
    //   this.$store.commit('removeOneItem',itemInfo);
    // },
    ...mapMutations({// 인자를 자동으로 넘겨버림
      removeTodo: 'removeOneItem'
    }),
    
  //...
  }
</script>

<!-- 사용, 인자를 자동으로 넘겨 줌 -->
<span class="removeBtn" v-on:click="removeTodo({todoItem,index})">
</span>

---

주의점

• Helper 들은 Store 의 코드와 Component 의 코드를 그대로 이어주는 역할을 한다.
• Store 는 State 를 변경(Mutations)하고, 백앤드서버에 요청(Actions)을 하는 비동기 메서드를 제공하는데 집중해야한다.
• Component 단에서 발생하는 예외처리, 그 외의 로직은 Component의 methods에 적용하는게 옳다.

//해당 코드는 Helper 를 사용하기에 적절하지 않음.

methods: {
    addTodo () {
      if(this.newTodoItem !== '') {
        //commit() 으로 Vuex 에 접근
        this.$store.commit('addOneItem',this.newTodoItem);
      this.clearInput();
      } else {
        this.showModal = !this.showModal
      }
    },