[Vue3 + vite + tailwindCSS] Vuex , vuex-persistedstate

https://v3.vuex.vuejs.org/kr/

Vuex가 무엇인가요? | Vuex

 

현재 레이아웃을 아래와 같이 나눠놨다. 

 

이제 유저인증이 되면, 메인 페이지를 사용할 수 있도록 

 

router에 코드를 추가할건데 그 때 필요한 것이 vuex임 

 

store에서 상태 관리에 필요한 코드들을 모아두고 전역으로 사용할 수 있게 해주는 기능

 

npm install vuex --save

 

 

 

 

store 폴더 생성 후 index.

https://v3.vuex.vuejs.org/kr/guide/

시작하기 | Vuex

import { createStore } from "vuex";

const store = createStore({

  state() {

    return {

      user,

    };

  },

  mutations: {

    SET_USERS: (state, user) => {

      state.user = user;

    },

  },

});

export default store;

 

 

 

main.js에서 store import 후 use로 추가한다.

import { createApp } from "vue";

import "./style.css";

import App from "./App.vue";

import router from "./router";

import store from "./store";

createApp(App).use(router).use(store).mount("#app");

 

 

 

 

로그인 페이지로 돌아와서

import { auth, db } from "../firebase";

import { doc, getDoc } from "firebase/firestore";

import store from "../store";

 

 

    onMounted(() => {

      console.log(store.state.user);

    });

    //회원가입 클릭 시 실행되는 함수

    const onLogin = async () => {

      if (!email.value || !password.value) {

        alert("이메일, 비밀번호를 모두 확인해 주세요.");

        return;

      }

      try {

        loading.value = true;

        const { user } = await signInWithEmailAndPassword(

          auth,

          email.value,

          password.value

        );

        //get user info

        const docRef = doc(db, "users", user.uid);

        const docSnap = await getDoc(docRef); // users에서 user.uid로 검색한 결과 가져옴

        console.log(docSnap.data); //검색 결과 테스트

        store.commit("SET_USERS", docSnap.data()); //store의 SET_USERS에 상태 저장하기

        console.log(store.state.user);

        // router.replace("/"); //뒤로가기 클릭하면 로그인 페이지로 이동못하게함

      } catch (e) {

        switch (e.code) {

          case "auth/invalid-email":

            alert("잘못된 이메일 형식입니다");

            break;

          case "auth/wrong-password":

            alert("비밀번호가 틀립니다.");

            break;

          case "auth/user-not-found":

            alert("등록되지 않은 이메일입니다.");

            break;

          default:

            alert(e.message);

            break;

        }

      } finally {

        loading.value = false;

      }

    };

 

 

로그인 버튼을 클릭하면 

1.  auth를 통해 이메일과 비밀번호를 확인하고 

2.  firestore의 users에서 user.uid로 검색하여 해당 유저 정보를 가져온다.

그리고 그 유저 정보를 SET_USERS에 저정함

그러면 현재 로그인 중인 유저의 정보를 전역으로 사용할 수 있음. 

 

 

테스트해봄

 

1. 로그인 페이지로 이동 시 onMounted()로 인해 콘솔에 null값이 출력된다. 

 

 

2. 로그인이 정상적으로 되면 콘솔에서 현재 로그인 중인 유저의 정보가 출력됨을 확인할 수 있다. 

   console.log(store.state.user);

 

 

하지만 여기서 문제점은 새로고침(F5)를 할 경우에는 이 상태가 초기화된다는 점..

 

 

그래서 아래의 플러그인을 추가적으로 설치해야함 

 

https://www.npmjs.com/package/vuex-persistedstate

vuex-persistedstate

 

 

npm install --save vuex-persistedstate

 

 

 

 

사용설명서에 따라 store-> index.js에서 코드를 추가한다.

 

import { createStore } from "vuex";

import createPersistedState from "vuex-persistedstate";

const store = createStore({

  state() {

    return {

      user: null,

    };

  },

  mutations: {

    SET_USERS: (state, user) => {

      state.user = user;

    },

  },

  plugins: [createPersistedState()],

});

export default store;

 

 

 

그리고 서버 종료 후  다시 npm run dev 로 실행 후

 

로그인 후 리로드 해봤다. 

 

 

 

 

 

 

위와 같이 상태가 그대로 저장되어있는것을 확인할 수 있다.