[Vue.js] - 새로고침 후에도 Vuex 상태 유지하기 (vuex-persistedstate 사용)

2021.03.26 - [Vue.js] - [Vue.js] 로그인 기능 구현하기

[Vue.js] 로그인 기능 구현하기

위에 글과 이어진다. 추가로 새로고침을 하고 Vuex 상태가 초기화 되는 것을 막고싶은 사람들은 모두 참고하면 된다.

 

 

Vuex 문제점

새로고침을 하면 Vuex의 store state가 모두 초기화가 된다. 이는 Vuex는 Vue의 플러그인이기 때문이다. 새로고침을 하면 Vue 인스턴스가 소멸했다가 다시 생성되는 Vue의 라이프사이클을 생각하면 쉽게 이해될 문제이다.

 

 

vuex-persistedstate 란?

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

 

 

설치

npm install --save vuex-persistedstate

 

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex)

import animalStore from '@/store/modules/animalStore.js'
import fruitStore from '@/store/modules/fruitStore.js'
import userStore from '@/store/modules/userStore.js'

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

export default store

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

 

모든 Vuex store의 값을 localStorage에 저장하게 되면 성능이 떨어질 가능성이 크기에 모듈화를 시켜서 저장할 store만 path에 등록하는 것이 좋다. 모듈화를 하면 시각적 뿐 아니라 여러가지로 좋은 것을 알 수 있다.