10. 새로고침시 Vuex 상태 유지 (vuex-persistedstate)

로그인 부분을 구현하는 중 잠깐만 사이트를 이동하거나 새로고침을 하면 state가 모두 

초기화 되어서 화면 데이터가 다 날라간다. 나는 로그인 구현이 다 끝나고 설치를 했지만..

(꼭..) 미리 설치해두면 무척 편하다...

---

 

Vuex 문제점

새로고침을 하면 Vuex의 store state가 모두 초기화가 된다. 이는 Vuex는 Vue의 플러그인이기 때문이다.

새로고침을 하면 Vue 인스턴스가 소멸했다가 다시 생성되는 Vue의 라이프사이클 때문이다

 

vuex-persistedstate 란?

Vuex store의 state에 저장된 값을 웹 브라우저의 localStorage에 저장 및 업데이트를 해준다. 이는 화면이 새로 로딩을 하게 되어도 없어지지 않기 때문에 로딩시 localStorage에 있는 값을 state에 다시 동기화를 시켜준다.

 

src/store/index.js

import Vue from 'vue';
import Vuex from "vuex";
import userStore from '@/store/modules/userStore';
import createPersistedState from 'vuex-persistedstate';


Vue.use(Vuex);


export const store = new Vuex.Store({
    modules: {
        userStore : userStore
    },
	//plugins에 명시
    plugins: [createPersistedState({
        paths: ["userStore"]
    })]

});

vuex-persistedstate의 경로를 등록하여 plugins에 명시시켜주면 사용할 수 있다.

 

모든 Vuex store의 값을 localStorage에 저장하게 되면 성능이 떨어질 가능성이 크기에 

모듈화를 시켜서 저장할 store만 path에 등록하는 것이 좋다

 

 

거의 다 참고한 글: https://developerjournal.tistory.com/16?category=912023 [개발 일기]