Vuex mapGetters

1 개요

Vuex mapGetters

• 컴포넌트가 여러 저장소 상태 속성이나 getter를 사용해야 하는 경우 계산된(computed) 속성을 모두 선언하면 반복적이고 장황해진다.
• 계산된 getter 함수를 생성하는 mapState 헬퍼를 사용하여 간략하게 할 수 있다.

2 예제

<div id="app">
  <div>{{ doneTodos }}</div>
  <div style='background:yellow'>{{ doneTodosCount }}</div>
</div>

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vuex"></script>
<script>
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false },
      { id: 3, text: '...', done: true },
      { id: 4, text: '...', done: true }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    },
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  }
})
new Vue({
  el: '#app',
  store,
  computed: {
    ...Vuex.mapGetters([
      'doneTodos',
      'doneTodosCount'
    ])
  }
})
</script>

3 같이 보기

• Vuex getters

4 참고

• https://vuex.vuejs.org/kr/guide/getters.html#mapgetters-헬퍼