Vuex에서 새로고침 시 store 초기화 막는 방법

Vuex를 이용하는데 로그인 유저의 정보를 loginUser에 저장하고 새로고침을 눌렀더니

local Storage에 토큰정보만 남아있고 로그인이 풀려버리는 상황이 발생했다.

 

처음에 찾아봤던 방법은 새로고침하면 Vuex의 store가 새로 생성돼서 beforeCreated를 써서 토큰값으로 유저의 정보를 불러오는 방법을 찾았는데

 

많은 사람들이 새로고침하면 사라지는 게 화가 났는지 간편하게 이용 가능하도록 만들어놨다.

 

 

 

npm 사용

npm install --save vuex-persistedstate

yarn 사용

yarn add vuex-persistedstate

 

 

설치하고 store/index.js에서

import createPersistedState from "vuex-persistedstate";

import를 진행해준다.

 

많은 사람들의 코드를 찾아봤더니

import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()],
});

이렇게 사용했었는데 내 프로젝트에 적용하면 vue cli에서 store를 사용하지 않아서 서버가 실행되지 않았다.

 

 

그래서 export하는 부분 맨 밑에다가 

export default new Vuex.Store({

  plugins: [createPersistedState()],
  modules: {},

플러그인으로 추가해주니깐 local Storage에 모든 state 정보가 저장되는 걸 확인할 수 있었다.

 

(근데 유저의 민감한 정보는 저장되면 안 되니깐 내가 원하는 정보만 따로 넣어주는 방법이 필요하다)