Binding Helper

Component Binding Helper

 

JS Array Helper Method를 통해 배열 조작을 편하게 하는 것과 유사

논리적인 코드 자체가 변하는것x 쉽게 사용할 수 있도록 되어 있음에 초점을 잡는다.

 

종류

• mapState
• mapGetter
• mapActions
• mapMutations

 

1. mapState

• computed와 Store의 state를 매핑시켜 매핑된 computed 이름이 state 이름과 같을때 문자열 배열을 전달 할 수 있음!

computed: {
	todos() {
    	return this.$store.state.todos
    },
}

위와 같은 코드가

import { mapState } from 'vuex'

computed: mapState(['todos',]),

이와 같이 간단한 코드로 변한다.

 

2. mapGetters

• Computed와 Getter를 매핑하여 getter를 전개 연산자로 계산하여 추가함

  computed: {
    completedTodosCount() {
      return this.$store.getters.completedTodosCount
    },
    uncompletedTodosCount() {
      return this.$store.getters.uncompletedTodosCount
    },
    allTodoCount() {
      return this.$store.getters.allTodoCount
    }
  }

위와 같은 코드가

import { mapGetters } from 'vuex'

 computed: {
    ...mapGetters(['completedTodosCount','uncompletedTodosCount', 'allTodoCount'])
  }
}

이렇게 변함

 

3. mapActions

• action을 전달하는 component method 옵션을 만듦
• actions를 전개 연산자로 계산하여 추가함

    methods: {
         deleteTodo() {
             this.$store.dispatch('deleteTodo', this.todo)
         },
         updateTodoStatus() {
             this.$store.dispatch('updateTodoStatus', this.todo)
         }
    }

위와같은 코드가

import { mapActions } from 'vuex'

methods: {
	...mapActions(['deleteTodo','updateTodoStatus'])
}

이렇게 간단하게 변함

 

이때 주의할점은 mapActions를 이용하면 어떠한 선택된 인자를 선언? 해줄 필요가 있는데 이를 html요소에 함께 넣어줌으로써 선언할 수 있다.

<!-- mapActions를 사용하여 선택된 todo라는 인자를 이용하는 방법 -->
<button @click="deleteTodo(todo)">Delete</button>
<!-- html요소에 함수꼴마냥 ()안에 넣어줌 -->

bindingHelper를 이용하지 않았을땐
methods내에 함수를 지정할때 받는 함수명 옆에 this.todo처럼 인자를 하나 더 받아왔었다.
deleteTodo() {
	this.$store.dispatch('deleteTodo', this.todo)}