헬퍼 함수가 주는 간편함

게터스를 썻을 때 어느 부분에서 코딩을 편하게 할 수 있는지 볼수 있다.

 

게터스는 state 값을 가져오거나, 가공한 값을 불러올 때 찾는다.

 

store

import { createStore } from "vuex";

export const store = createStore({
    state : {
        price : 100
    },
    getters : {
        originalPrice(state){
            return state.price;
        },
        doublePrice(state){
            return state.price * 2;
        },
        triplePrice(state){
            return state.price * 3;
        }
    }
})

 

Demo.js

<template>
    <p>{{ originalPrice}}</p>
    <p>{{ doublePrice}}</p>
    <p>{{ triplePrice}}</p>
</template>

<script>
import{ mapGetters} from 'vuex';

export default {
    computed : {
        ...mapGetters(['originalPrice','doublePrice','triplePrice']),
    }
}
</script>

 

간편히 꺼내 쓸 수 있다.

 

만약 db에서 불러온 값의 가공이 필요할 때 게터에서 하고, 깔끔하게 불러와서 사용하면 된다.