[vue] getters

computed 처럼 state값이 변경될때 변화에 따른 차이를 자동으로 반영하여 값을 계산해준다.

• getters는 계산된 코드를 스토어에서 선언하고, 해당 코드를 컴포넌트 내에서 불러와 사용할 수 있다.
• 여러 컴포넌트에서 같은 로직을 비효율적으로 중복 사용하지않고, 하나의 스토어에서 getters를 이용하여 사용하면된다.

//state의 username이 빈 문자열이 아닌지 체크하는 getters

getters: {
	isLogin(state) {
		return state.username !== '';
	}
}

그리고

<!-- 1. 로그인 후 나타날 영역 -->
<template v-if="isUserLogin">
	<span {{ $store.state.username }}</span>
</template>
<!-- 2. 로그인 전에 나타날 영역 -->
<template v-else>
	<router-link to="/login">로그인</router-link>
	<router-link to="/signup">회원가입</router-link>
</template>

computed: {
	isUserLogin() {
		return this.$store.getters.isLogin;
	}
}

this.$store.getters.isLogin; 을 템플릿 영역에 그대로 쓰면 너무 코드가 장황하므로, Computed속성을 이용해서 isUserLogin이라는 새로운 속성을 만들고, 템플릿에 사용하여 코드를 간소화할 수 있다.