Vue Store(Vuex) - Getters

Getters란

: 중앙 데이터 관리식 구조에서 발생하는 문제점 중 하나는 각 컴포넌트에서 Vuex의 데이터를 접근할때

중복된 코드를 반복호출 하게 되는것이다.

예)

//App.vue

computed: {

doubleCounter() {

return $store.state.counter * 2;

}

}

​

//Child.vue

computed: {

doubleCounter() {

return $store.state.counter * 2;

}

}

이때 Vuex의 데이터(state) 변경을 각 컴포넌트에서 하는게 아닌 Vuex에서 수행하도록 하고 각 컴포넌트들은 Getters를 호출하여 수행한다.

​

//Getters 등록

// src/store/store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

​

export const store = new Vuex.Store({

    state: {

        counter: 0;

    }

​

    getters: {

        getCounter: function(state) {

            return state.counter;

        }

    }

});

​

​

​

//Getters 사용 및 호출

//App.vue 부모 컴포넌트

computed: {

parentCounter() {

    return this.$store.getters.getCounter;

}

}

​

//child.vue 자식 컴포넌트

computed: {

childCounter() {

return this.$store.getters.getCounter;

}

}

​

위 코드를 Vuex에 내장된 helper 함수, mapGetters로 가독성을 더 올릴수 있다.

​

<template>

    <div>

        Parent counter : {{ parentCounter }}

    </div>

</template>

<script>

import { mapGetters } from 'vuex'

export default {

    computed: {

        ...mapGetters([

            parentCounter: 'getCounter'

        ])

    }

}

</script>

현재 사용하고 있는 구조는 getter.js 파일을 따로 만들어 메인 store js 파일에 집어넣는다.

​

//getter.js

const getters = {

    roles: state => state.user.roles

    auth: state => state.user.auth

}

​

export default getters

​

//store.js

import Vue from 'vue'

import Vuex from 'vuex'

import getters from './getter'

Vue.use(Vuex)

​

const store = new Vuex.Store({

    state: {

        counter: 0;

    },

    getters

})

export default store

​

위 내용처럼 getter 파일을 불러와 store에 담는다.

​

src/store/getters.js

​

const getters = {
    username: state => state.user.name
    auth: state => state.auth.auth
}
​
* 해당 "getters 변수명": state => state."js파일명"."state 명"
import getters from './getters'
const store = new Vuex.Store({
    getters
})
​
값 불러오기 위해
​
import { mapGetters } from 'vuex'
​
.
.
computed() {
    ...mapGetters(['username']) //getters.js에서 생성한 변수명으로 호출한다.
}
​