[Vuex] 페이지 새로고침시 상태 초기화 방지

Vue를 이용한 프로젝트를 진행하면 상태 관리 라이브러리로 vuex를 많이 이용하게 된다.

이용방법도 쉽고 편하지만 한 가지 문제가 있는데 브라우저에서 뒤로 가기 또는 새로고침을 하게 되면 vuex에 저장되어 있던 state들이 초기화가 된다는 점이다.

 

예를 들어 회원이 로그인한 상태를 유지하고 있다가 페이지가 새로고침 되면 로그아웃 하지도 않았는데 로그인 상태가 해제되어 버리는 상황이 나올 수 도 있다.

 

이 문제는 이슈가 워낙 많아서 npm을 만들어 놓은 게 있어 그걸 가져다 쓰게 되면 이런 문제를 해결할 수 있게 된다.

 

// npm 이용시
npm i vuex-persistedstate

// yarn 이용 시
yarn add vuex-persistedstate

위에 패키지를 설치해 주면 바로 사용이 가능하다.

 

// src/store/index.ts

import { createLogger, createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import { AuthModuleState, authModule as auth } from './auth'

export interface RootState {
  auth: AuthModuleState
}

export default createStore({
  modules: {
    auth,
  },
  plugins: [
    createLogger(),
    createPersistedState()
  ]
})

이렇게만 해주면 등록되어 있는 모든 store값들을 localStorage에 저장해 준다. 그 뒤에 원하는 값을 localStorage에서 가져오는 방식이다.

하지만 여기서 문제가 store에 저장하는 값들이 적을 경우는 모든 값을 저장해 주어도 상관이 없지만 대규모 프로젝트나 상용 서비스에서는 store에 저장하는 값들이 많아질 수 있기 때문에 저장되는 값들이 많아지면 성능에 문제가 생길 수도 있다.

 

그래서 store들을 모듈로 지정해서 원하는 모듈만 localStorage에 저장되게 관리할 수 있다.

// src/store/index.ts

import { createLogger, createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import { AuthModuleState, authModule as auth } from './auth'

export interface RootState {
  auth: AuthModuleState
}

export default createStore({
  modules: {
    auth,
  },
  plugins: [
    createLogger(),
    createPersistedState({
    	paths: ['auth']
    })
  ]
})

이런 식으로 paths에 원하는 모듈을 입력하게 되면 그 모듈만 상태 값을 관리하기 때문에 성능 이슈를 해결할 수 있을 것이다.