[vuex] Getters

state를 계산한 값을 사용해야 할 때가 있습니다.

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

todos라는 state에서 done 상태인 리스트를 가져오고 싶을 때 위의 코드와 같이 작성할 수 있습니다. 하지만 여러 컴포넌트에서 이 코드를 사용해야 한다면, 위의 코드를 복사해야 한다는 단점이 있습니다. 동일한 코드를 복사하여 사용하게 된다면 당연히 유지보수는 힘들어지겠죠.
이 단점을 해결하기 하기 위해서 Vuex는 Getter 기능을 제공합니다. store에서 사용하는 컴포넌트의 computed 속성과 비슷하다고 생각하면 이해하기 쉽습니다. computed 속성 처럼 종속성에 따라 결과를 캐시하고, 종속성이 변경된 경우에만 다시 계산합니다. 여기서 말한 종속성이란 결과를 계산하기 위해 사용된 원천 자료(source of truth)을 이야기 합니다.

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

getter의 첫번째 인자값은 state 입니다.

1. Property 스타일

getter는 store.getters 객체를 통해 사용할 수 있습니다. property 값처럼 사용할 수 있습니다.

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

getter는 두번째 전달인자로 getters를 전달 받습니다. getters를 사용하여 다른 getter를 사용할 수 있습니다.

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

위의 코드와 같이 컴포넌트에서 getter를 사용할 수 있습니다.

2. Method 스타일

함수를 반환하여 getter에 전달인자를 넘겨줄 수도 있습니다.

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

getter를 메소드처럼 사용할 경우 결과를 캐시하지 않기 때문에, 호출할 때마다 값을 다시 계산하게 됩니다.

3. mapGetters

mapGetters는 store의 getter를 computed 속성에 매핑합니다.

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    // getter를 객체 전개 연산자(Object Spread Operator)로 계산하여 추가합니다.
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

mapGetters 사용방법은 이전 포스트에서 이야기한 mapState와 사용방법이 동일합니다.

...mapGetters({
  // this.doneCount를 store.getters.doneTodosCount에 매핑하십시오.
  doneCount: 'doneTodosCount'
})

객체를 사용하면 getter를 다른 이름으로 매핑할 수 있습니다.

참고

• https://vuex.vuejs.org/kr/guide/getters.html