[Vue-16]vuex 사용하기(getters)

JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.

기초지식은 다른 강의를 참조하도록 하라.

참고:

[Package]Bower(Front End Pacakage 관리) 설치

[Package]Vue.js

https://vuex.vuejs.org/kr/

http://vuejs.kr/update/2017/01/08/using-vue-with-vuex-vue-rotuer/

우리가 이 포스팅에서 vuex를 사용하는 방법에 대해서 이야기해 보있다.

이번에는 이 때 우리는 vuex와 state와 mutations만 논했는데 이번에는 getters만 논해보도록하자.

getters는 사실 정말 별거 없이 뭔가를 보여주는 역활이다.

경우에 따라서, 혹은 사람 스타일에 따라서 getters를 아예 쓰지 않는 사람도 본적 있다.

그리고 정말 대다수의 경우에 getters는 없어도 큰 상관없는 경우가 많다.

하지만 여러분이 원하는게 원자구조라면 getters가 있는게 좋긴하다.

getters는 꼭 필수는 아니지만 여러분에게 아주 유용한 설탕같은 존재가 될 것이다.

https://github.com/justkukaro/vue-test-server/tree/master/vuex-getters

예제는 이 프로젝트로 진행 하였다.

<!--HelloWorld.vue-->
<template>
    <div class="hello">
        <b>count : {{this.$store.state.count}}</b><br>
        <b>count^2 : {{this.$store.getters.count}}</b><br>
        <input type="button" @click="increment()" value="increment"/>
        <input type="button" @click="decrement()" value="decrement"/>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {}
        },
        created: function () {
        },
        methods: {
            increment: function () {
                this.$store.commit('increment')
            },
            decrement: function () {
                this.$store.commit('decrement')
            }
        }
    }
</script>

<style scoped>
</style>

증가 버튼을 누르면 증가하고 감소 버튼을 누르면 감소하는 예제이다.

그런데 자세히 보면 못보던 녀석이 있다.

<b>count : {{this.$store.state.count}}</b><br>
<b>count^2 : {{this.$store.getters.count}}</b><br>

위의 녀석은 우리가 vuex에서 state를 배웠을때 나왔는데 밑에는 처음본다.

이것이 바로 getters이다. store쪽을 보자.

/* store.js */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        count: 0,
        weight: 2,
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
        }
    },
    getters:{
        count(state, getters){
            return Math.pow(state.count, getters.weight);
        },
        weight(state, /*getters*/){
            return state.weight;
        }
    }
})

store쪽에도 변화가 있는데 getters에 함수들이 추가 되었다.

weight(state, /*getters*/){
    return state.weight;
}

getters내부의 함수들은 총 2개의 파라메터를 가진다.

그러나 뒤에 파라메터는 성향에 따라 자주 쓰일 수도 있고 자주 쓰이지 않을 수도 있다.

state: {
    count: 0,
    weight: 2,
},

첫번째 파라메터인 state는 당연히 내부 state를 의미한다.

우리는 둘을 정의했으므로 count와 weight를 사용할 수 있다.

count(state, getters){
    return Math.pow(state.count, getters.weight);
},

count라는 또다른 getters에서는 내부의 getters를 의미한다.

getters는 총 2개로 weight와 count가 있는데 이를 사용할 수 있다.

해당 예제는 당연하게도 현재 count를 2의 제곱을 해주는 예제이다.

예상한대로 동작하는 것을 확인할 수 있다.