Vuex getters

1 개요

Vuex getters

2 예제 1: doneTodos

• getters는 첫 번째 전달인자로 상태(state)를 받는다.

html

Copy

<div id="app">
  <div>{{ doneTodos }}</div>
</div>

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/vuex/dist/vuex.min.js"></script>
<script>
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 't1', done: true },
      { id: 2, text: 't2', done: false },
      { id: 3, text: 't3', done: true },
      { id: 4, text: 't4', done: true }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})
new Vue({
  el: '#app',
  store,
  computed: {
    doneTodos () {
      return this.$store.getters.doneTodos
    }
  }
})
</script>

3 예제 2: doneTodosCount

html

Copy

<div id="app">
  <div>{{ doneTodos }}</div>
  <div>{{ doneTodosCount }}</div>
</div>

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

4 예제 3: getTodoById

html

Copy

<div id="app">
  <span>{{ foo }}</span>
</div>

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/vuex/dist/vuex.min.js"></script>
<script>
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 't1', done: true },
      { id: 2, text: 't2', done: false },
      { id: 3, text: 't3', done: true },
      { id: 4, text: 't4', 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: {
    foo () {
      return this.$store.getters.getTodoById(2)
    }
  }
})
</script>

5 같이 보기

• Vue.js computed

6 참고

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