Vue 조건부 렌더링, Vuex getters

vuex getters

: computed 처럼 state값이 변경될때 특정 상태를 계산할 수 있도록 사용하는 속성.

//state의 username이 빈 문자열이 아닌지 체크하는 getters
getters: {
	isLogin(state) {
		return state.username !== '';
	}
}

- Vuex actions에서 getters 속성 사용하기

: https://stackoverflow.com/questions/52048944/vuex-call-getters-from-action

actions: {
	someAction({ getters }, payload) {
    	const isLogin = getters.isLogin;
    }
},

- 특정 모듈에 있는 getters 가져오기

// movie 모듈에 있는 getters 사용하기
this.$store.getters['movie/genres'];

[]로 감싸고, '모듈명/Getters 속성 명' 으로 값을 가져올 수 있다.

• 로그인 후 헤더 영역 분기 처리
  : 로그인 후 나타날 영역과 사라질 영역을 <template> 태그를 이용해서 조건부 렌더링한다.
  : 로그인 후 LoginForm 컴포넌트에서 username의 상태 값을 변경하게 되면, isLogin 값이 true로 변경되므로 헤더가 변경된다.
  : Appheader 컴포넌트에서는 $store.getters.isLogin 속성의 값을 이용해서 로그인 여부를 판단한다.

<!-- 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이라는 새로운 속성을 만들고, 템플릿에 사용하여 코드를 간소화했다.

• <template> 사용하기
  : vue에서 조건에 따라 변경되어야 나타나야할 엘리먼트가 하나 이상일 경우, 그 엘리먼트들을 그룹으로 묶기 위해서 <template>을 사용한다.
  : <template>은 최종 결과물(웹 페이지)에 나타나지 않는다.
  : https://kr.vuejs.org/v2/guide/conditional.html

• 로그아웃 기능 구현

//store
mutations: {
	clearUsername(state) {
		state.username = '';
	}
}

//AppHeader.vue
uesrLogout() {
	this.$store.commit('clearUsername');
	this.$router.push('/login');
}

로그아웃 버튼을 클릭하면, 스토어에 있는 username 값을 빈 문자열로 초기화 하고, 로그인 페이지로 이동한다.