(1) Getter란?

중앙 데이터 관리식 구조에서 발생하는 문제점 중 하나는 각 컴포넌트에서 Vuex의 데이터를 접근할 때 중복된 코드를 반복 호출 하게 되는 것 입니다.

중복된 코드 반복 호출 예시

// App.vue
computed: {
  doubleCounter() {
    return this.$store.state.counter * 2;
  }
},

// Child.vue
computed: {
  doubleCounter() {
    return this.$store.state.counter * 2;
  }
},

이때, Vuex의 state 변경을 각 컴포넌트에서 수행하는 것이 아닌, Vuex에서 수행하도록 하고 각 컴포넌트에서 수행 로직을 호출하면, 코드 가독성도 올라가고 성능에서도 이점이 생깁니다.

Getter 적용 예시

// store.js (Vuex)
getters: {
  doubleCounter: function (state) {
    return state.counter * 2;
  }
},

// App.vue
computed: {
  doubleCounter() {
    return this.$store.getters.doubleCounter;
  }
},

// Child.vue
computed: {
  doubleCounter() {
    return this.$store.getters.doubleCounter;
  }
},

※Getter 등록 전 사전 준비

App.vue

<template>
  <div id="app">
    Parent counter : {{ parentCounter }} <br> //computed 사용
    <button @click="addCounter">+</button>
    <button @click="subCounter">-</button>

    <child></child> <!--v-bind 삭제-->
  </div>
</template>

<script>
    import Child from "./Child.vue";

    export default {
        components: {
            child: Child
        },
        data() {
            return {
                counter: 0
            };
        },
        methods: {
            addCounter() {
                this.$store.state.counter++;
            },
            subCounter() {
                this.$store.state.counter--;
            }
        },
        computed: {				//computed 등록
          parentCounter() {
              return this.$store.state.counter;
          }
        }
    };
</script>

Child.vue

<template>
    <div>
        <hr>
        Child counter : {{ childCounter }} <br> //computed 사용 
        <button>+</button>
        <button>-</button>
    </div>
</template>

<script>
    export default {
        computed: {				//computed 등록
            childCounter() {
                return this.$store.state.counter;
            }
        }
    };
</script>

computed 속성을 활용하여 템플릿 코드 간결화 및 가독성이 좋게 만들어 주었다.

(2) Getter 등록

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
    state:{
        counter: 0  
    },
    getters: {			//getter 등록
      getCounter: function (state) {
          return state.counter;		//state 중 counter를 return
      }
    }
});

(3) Getter 사용

App.vue

<template>
  <div id="app">
    Parent counter : {{ parentCounter }} <br>
    <button @click="addCounter">+</button>
    <button @click="subCounter">-</button>

    <child></child> <!--v-bind 삭제-->
  </div>
</template>

<script>
    import Child from "./Child.vue";

    export default {
        components: {
            child: Child
        },
        data() {
            return {
                counter: 0
            };
        },
        methods: {
            addCounter() {
                this.$store.state.counter++;
            },
            subCounter() {
                this.$store.state.counter--;
            }
        },
        computed: {				
          parentCounter() {
              return this.$store.getters.getCounter;
				 //this.$store.getters 이용해 getter 사용
          }
        }
    };
</script>

Child.vue

<template>
    <div>
        <hr>
        Child counter : {{ childCounter }} <br> 
        <button>+</button>
        <button>-</button>
    </div>
</template>

<script>
    export default {
        computed: {				
            childCounter() {
                return this.$store.getters.getCounter;
			 //this.$store.getters 이용해 getter 사용
            }
        }
    };
</script>

(4) mapGetters

Vuex에 내장된 helpe 함수인 mapGetter로 코드를 더 직관적이게 작성할 수 있다.

<template>
  <div id="app">
    Parent counter : {{ getCounter }} <br>
    <button @click="addCounter">+</button>
    <button @click="subCounter">-</button>

    <child></child> <!--v-bind 삭제-->
  </div>
</template>

<script>
    import Child from "./Child.vue";

    export default {
        components: {
            child: Child
        },
        data() {
            return {
                counter: 0
            };
        },
        methods: {
            addCounter() {
                this.$store.state.counter++;
            },
            subCounter() {
                this.$store.state.counter--;
            }
        },
        computed: {	
            ...mapGetters([		//mapgetter 사용
            'getCounter'
            ])
          }
        }
    };
</script>

Child.vue

<template>
    <div>
        <hr>
        Child counter : {{ getCounter }} <br> 
        <button>+</button>
        <button>-</button>
    </div>
</template>

<script>
    export default {
        computed: {				
            ...mapGetters([		//mapGetter 사용
            'getCounter'
            ])
            }
        }
    };
</script>