Vuex - Getters

Vuex - Getters

---

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

코드를 통해 예를 들어보자.

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

여러 컴포넌트에서 같은 로직을 비효율적으로 중복 사용하고 있다.

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

아래의 코드처럼 말이다.

// 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;
    }
},

연산 로직을 Vuex의 getters 속성에다가 정의하도록 처리했고, 각각의 컴포넌트들에서는 해당 로직을 호출하도록 변경했다.

(Vuex의 Getters 속성을 각각의 컴포넌트들이 참조하고 있다.)

코드 정리

---

이전 소스 중 App.vue를 예로 들어 보자.

<!-- App.vue -->
<div id="app">
    Parent counter : {{ this.$store.state.counter }}
</div>

이전 소스에서는 Vuex의 counter를 호출하기 위해서 콧수염 괄호안에 위와 같은 호출식을 작성했었다.

그러나 Vue 공식 사이트에서는 Template의 표현식을 최대한 간소화해야 한다고 권장하고 있으므로 우리는 이것을 좀 더 간략하게 호출할 수 있도록 코드를 수정해야한다.

App.vue와 Child.vue를 열어서 템플릿 부분을 다음과 같이 변경하자.

닷 ('.')을 찍어 호출했던 이전과는 다르게 이름 하나만을 작성해서 데이터를 호출하는 것이다.

스크립트를 작성하자.

computed 속성에 메소드를 추가했다.

counter의 데이터를 가져오는 메소드다.

이렇게 작성하면서 가독성이 좋아졌다.

그러나 여전히 문제점은 존재한다.

parentCounter() 메소드와 childCouner() 메소드는 동일한 데이터 호출 로직을 가지고 있다.

따라서 중복되는 이 로직을 합쳐야하는 과제가 남아있다.

Getters 등록

---

데이터 호출에 관련된 중복되는 공통 로직을 Vuex의 getters 속성에 정의하여 호출하면 편하다.

Vuex에 getters 속성을 정의하자.

getters 속성에 getCounter라는 메소드를 하나 생성하여 state 속성의 counter 데이터를 리턴하는 로직의 메소드를 정의했다.

Getters 호출

---

이제 각 컴포넌트에서 정의된 메소드를 호출하면 된다.

App.vue와 Child.vue에 각각 아래와 같이 computed 속성을 변경해주자.

이전에는 state 속성에 접근하여 데이터를 직접 호출했지만 이젠 getter를 통하여 데이터 값을 호출한다. 

이 예제에는 간단하게 데이터를 호출하기만 하기 때문에 크게 와닿지는 않겠지만, 

만약 데이터를 호출하기 전 연산처리가 필요한 경우 getters에서 미리 정의하여 컴포넌트에서 호출하면 되므로 동일한 로직을 최대한 방지할 수 있게 된다.

mapGetters

---

Vuex의 getters에는 mapGetters라는 기능도 존재한다.

이 기능을 활용하면 가독성이 올라간 코드를 더 직관적이게 작업할 수 있게 된다.

그러나 이를 사용할 경우 computed 속성과 함게 사용할 수 없다는 단점이 존재한다.

ES6의 문법 중 spread 연산자를 사용하면 단점을 해결할 수 있지만 그러기 위해선 Babel stage-2 라이브러리와 babel preset 라이브러리를 추가하여 설정을 해야하는 번거로움이 존재한다.

따라서 추후에 필요한 경우 찾아서 작업하거나 이 글의 맨 하단 참고 사이트를 통해 사용 방법을 알아보도록 하자.

참고 - 

https://joshua1988.github.io/web-development/vuejs/vuex-getters-mutations/