Vue] Getters 파헤치기

이번시간에는 Vuex에서 Getter를 사용하는 방법을 알아보겠습니다. 
먼저 아래와 같은 예시를 만들어주세요. Getter의 개념을 이해하기 위해서 예제는 최대한 쉽게 만들었습니다 :)

1) main.js

import Vue from 'vue'
import App from './App.vue'
import { store } from './store/index.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

2. store > index.js   - 멤버들의 정보가 담김

import Vue from 'vue';
import Vuex from 'vuex'

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
      members:[
        {
          id: 1,
          name: 'jiwon',
          team: 'engineering',
          position: 'Server Developer',
          emailAddress: 'jiwon@google.com',
          phoneNumber: '010-xxxx-xxxx',
          birthday: '1994/11/08',
        },
        {
          id: 2,
          name: 'jimin',
          team: 'markerting',
          position: 'markerter',
          emailAddress: 'jimin@google.com',
          phoneNumber: '010-xxxx-xxxx',
          birthday: '1992/03/26',
        },
        {
          id: 3,
          name: 'hansu',
          team: 'engineering',
          position: 'Web Developer',
          emailAddress: 'hansu@google.com',
          phoneNumber: '010-xxxx-xxxx',
          birthday: '1994/09/08',
        },
        {
          id: 4,
          name: 'nayoung',
          team: 'engineering',
          position: 'Web Developer',
          emailAddress: 'nayoung@google.com',
          phoneNumber: '010-xxxx-xxxx',
          birthday: '1995/04/10',
        },
      ]
    },

    getters: {
      
    },

    mutations: {
      
    },

    actions: {
      
    }
});

 

2. App.vue  - 화면에 멤버들의 정보를 뿌려줌 

<template>
  <div>
    <router-view></router-view>
      <h1>MEMBER</h1>

      <h3>Informaion</h3>
      <p>- number of members: {{ this.$store.state.members.length }} </p>
      <p>- The number of marketing: ?? </p>
      <p>- The percent of marketing: ?? </p>

      <hr>
      <h3>All Members</h3>
      <ul v-for="(item, index) in this.$store.state.members" :key="index">
          <li>Name: {{ item.name }}</li>
          <li>TEAM: {{ item.team }}</li>
      </ul>


  </div>
</template>

<script>

export default {
  data(){
        return{
            user: {
                id: "",
                name: "",
                team: ""
            }
        }
    },
    computed: {

    },
}
</script>

<style>

</style>

 

요렇게 페이지가 나오면 준비완료 입니다 :)

App.vue에서는 멤버들의 정보를 확인할 수 있는데요. Information에는 멤버 전체에 대한 간단한 정보를, All members에는 모든 회원들의 정보를 볼 수 있습니다. 저는 지난 시간에 배운 State를 두 군데에서 사용해보았는데요.

① Information의 number of members에서 'this.$store.state.members'의 값을 가져와서 length로 길이 구했습니다. 전체회원의 수, 즉 4가 출력된 걸 위에서 확인할 수 있었습니다.
② All Memebers의 멤버들의 정보를 ''this.$store.state.members'에서 가져온 뒤, for문을 이용해서 멤버들의 Name과 TEAM을 출력하였습니다.

 

1. Getters

우리는 위해서 처럼 원하는 State(상태)를 가져와서 사용할 수 있습니다. 그런데 프로그래밍을 하다보면 State만 출력하고 싶은게 아니라 State를 기반으로 파생된 상태를 출력하고 싶을 때도 있습니다. 예를 들면, 우리 예제에서 '??'로 표시되어있는 마케팅 팀원들의 수나, 마케팅 팀원들의 전체 비율은 약간의 계산이 필요합니다. App.vue에서 State를 받아서 계산하는 함수를 만들 수 있겠죠? 그런데 만약 이런 값들이 한 페이지가 아니라 여러페이지에서 필요로한다면 어떨까요? 우리는 해당 페이지마다 State를 받아서 같은 로직을 써줘야할까요?

이러한 문제점을 해결해주는 것이 바로 Getters입니다. State를 이용해서 만든 로직을 Getters에 넣어두면 Store를 이용해서 어디서든지 꺼내쓸 수있습니다. '??'완성하면서 Getters 예제를 익혀보겠습니다. 

store > index.js

getters에 멤버들의 전체수를 담는 CountMember, 마케팅 팀원들의 수인 CountMarketing, 마케팅 팀원들의 전체 비율인 PercentMarketing을 만들어 주었습니다. 인자로는 state를 받을 수 있는데, 이미 만들어진 getters또한 받아서 사용할 수 있습니다. 

import Vue from 'vue';
import Vuex from 'vuex'

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
      members:[
        {
          id: 1,
          name: 'jiwon',
          team: 'engineering',
          position: 'Server Developer',
          emailAddress: 'jiwon@google.com',
          phoneNumber: '010-xxxx-xxxx',
          birthday: '1994/11/08',
        },
        {
          id: 2,
          name: 'jimin',
          team: 'markerting',
          position: 'markerter',
          emailAddress: 'jimin@google.com',
          phoneNumber: '010-xxxx-xxxx',
          birthday: '1992/03/26',
        },
        {
          id: 3,
          name: 'hansu',
          team: 'engineering',
          position: 'Web Developer',
          emailAddress: 'hansu@google.com',
          phoneNumber: '010-xxxx-xxxx',
          birthday: '1994/09/08',
        },
        {
          id: 4,
          name: 'nayoung',
          team: 'engineering',
          position: 'Web Developer',
          emailAddress: 'nayoung@google.com',
          phoneNumber: '010-xxxx-xxxx',
          birthday: '1995/04/10',
        },
      ]
    },

    getters: {
      CountMember: state => {
        return state.members.length
      },
      CountMarketing: state => {
        let count = 0;
        state.members.forEach(mem =>{
          if(mem.team === 'markerting'){
            count ++;
          }
        })
        return count
      },
      PercentMarketing: (state, getters) => {
        let result = getters.CountMarketing / getters.CountMember * 100
        return result
      }
    },

    mutations: {

    },

    actions: {

    }
});

 

App.vue

그리고 App.vue에서는 State가 아닌 getters를 이용해서 원하는 값을 바인딩해줍니다.

<template>
  <div>
    <router-view></router-view>
      <h1>MEMBER</h1>

      <h3>Informaion</h3>
      <p>- number of members: {{ this.$store.state.getters.CorntMember }} </p>
      <p>- The number of Marketing: {{ this.$store.getters.CountMarketing}} </p>
      <p>- The percent of Marketing: {{ this.$store.getters.PercentMarketing }}%</p>

      <hr>

      <h3>All Members</h3>
      <ul v-for="(item, index) in this.$store.state.members" :key="index">
          <li>Name: {{ item.name }}</li>
          <li>TEAM: {{ item.team }}</li>
      </ul>



  </div>
</template>

<script>

export default {
  data(){
        return{
            user: {
                id: "",
                name: "",
                team: ""
            }
        }
    },

    
}
</script>

<style>

</style>

 

짜잔, Getters를 이용해서 원하는 값을 받았습니다.