[Udemy Vue 완벽가이드 Section15] 221. 예시: 더 많은 상태 추가하기

Counter 기능 외에 사용자 인증을 다루는 UserAuth.vue 컴포넌트도 만들어보자.

 

 

두 버튼이 있고, 인증(Auth) 상태에 따라 두 버튼 중 한 버튼만 보이게 하자.

물론 컴포넌트 내부에서 관리할 수도 있지만,

앱의 많은 부분에서 사용자 인증 여부를 고려해야하니 Vuex로 관리하는 게 좋다.

버튼이 두개로만 이루어진 template을 만들고, 

<!--UserAuth.vue-->
<template>
  <button>Login</button>
  <button>Logout</button>
</template>

 

그리고, App.vue에 UserAuth 컴포넌트를 import 해서 새 컴포넌트로 등록하자.

<template>
  <base-container title="Vuex">
     <the-counter></the-counter>
     <favorite-value></favorite-value>
     <button @click="addOne">Add 10</button>
     <change-counter></change-counter>
  </base-container>
  <base-container title="Auth">
     <user-auth></user-auth>
  </base-container>
</template>

<script>
// 생략..
import UserAuth from './components/UserAuth.vue';

export default {
  components: {
  //생략..
    UserAuth,
  },

 

 

인증이 된 상태라면 첫 번째 컨테이너가 보이도록 하자.

큰 애플리케이션을 상태에 따라 관리하는데 사용하는 유틸리티 기능으로 넘어가기 전에 Vuex에 기능을 추가해보자.

로그인 및 로그아웃 버튼 클릭 시, isLoggedIn상태를 관리하여 두 버튼 중 하나를 표시하기 위해 Auth상태에 따라 base-container를 보여주고 숨기자.

 

그럼 새 state와 더불어 필요한 getter, mutation 및 action을 추가해 true/false가 나올 isLoggedIn 상태를 관리해보자.

Auth 상태를 관리하기 위해 store의 state에 isLoggedIn 상태를 추가해보자.

// main.js
const store = createStore({
  state() {
    return {
      isLoggedIn: false,
    };
  },
}),

 

 

그리고 setAuth라는 mutation을 추가해 상태와 payload를 받아보자.

payload는 Auth 상태를 인증 및 비인증으로 설정할지 말해준다.

mutations: {
  setAuth(state, payload) {
    state.isLoggedIn = payload.isAuth;
  },
},

 

 

컴포넌트 내에서 mutation을 바로 호출하면 안된다고 배웠으므로 action도 추가해보자.

mutation과 동일한 원리인 setAuth 액션을 추가하거나 다른 방식으로 해보기 위해

두 개의 액션인 login액션과 logout액션을 추가해보자.

이 두 액션이 비동기식 일 수 있다. 현실에서는 여러 HTTP 요청을 전송하게 될텐데, 지금은 그건 고려하지 않고 간단하게 동기식으로 두자.

actions: {
  login(context) {
    context.commit('setAuth', { isAuth: true });
  },
  logout(context) {
    context.commit('setAuth', { isAuth: false });
  },
}

 

게터를 다룰 차례이다.

원하는 이름으로 추가해도 된다. 이번에는 userIsAuthenticated를 사용하자.

getters: {
  userIsAuthenticated(state) {
    return state.isLoggedIn;
  },
};

 

이제 UserAuth.vue로 돌아가서 버튼에 연결해보자.

script 부분을 추가하고 dispatch할 액션을 위한 메서드를 추가하자.

mapActions를 사용해도 되고, 직접 추가해도 되는데 이번에는 직접 추가해보자.

methods: {
  login() {
    this.$store.dispatch('login');
  },
  logout() {
    this.$store.dispatch('logout');
  },
},

 

이제 상태를 조작할 수 있게 된다.

버튼을 하나만 보여주기 위해서 우선 computed를 사용해서 getter에 액세스해야한다.

mapGetters를 사용하거나 직접 computed 프로퍼티를 설정한다.

// UserAuth.vue
computed: {
  isAuth() {
    return this.$store.getters.userIsAuthenticated;
  },
  //mapGetters 사용시,
  ...mapGetters({
   isAuth: 'userIsAuthenticated'
  })
},

 

유저가 비인증상태(isAuth가 false)일때 'Login'버튼을 나타낸다.

<!--UserAuth.vue-->
<template>
  <button v-if="!isAuth" @click="login">Login</button>
  <button v-else @click="logout">Logout</button>
</template>

 

 

현재 로그인 상태가 아니라 보이지 않는데, 

로그인 상태가 아닐 때

 

'Login'버튼을 클릭하면 Vuex가 보이고 바꿀 수도 있다.

로그인 상태일 때

 

 

로그아웃 버튼을 클릭하면 다시 보이지 않게 된다.

 

 

잘 작동된다.

앱이 복잡해짐에 따라 관리해야 하는 상태가 점점 많아진다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.