이전 포스팅에서 vuex로 store를 다루는 법에 대해 배웠지만 이것을 적용시켜보면
새로고침 시 store가 날아가는 것을 볼 수 있다.
우리는 store로 로그인을 관리하므로 이것이 날아간다는 것은 새로고침을 하면 로그인이 풀려버리는 것인데 이를 유지하기 위해서는 vuex-persistedstate
라이브러리를 사용해야 한다.
해당 라이브러리는 vuex를 저장해준다.
저장해준다는 뜻은 새로고침을 해도 저장된 데이터를 가져와서 사용할 수 있다는 것이다.
vuex-persistedstate
가 지원하는 저장소는 3가지로 localstroage
, cookie
, secure-ls
이다.
로컬이나 쿠키는 알겠지만 secure-ls
는 좀 낯선데, 찾아보니 데이터를 암호화하여 localstroage
에 저장하는 라이브러리이다.
프로젝트에서는 개발 시간이 짧은 탓에 디폴트값인 로컬스토리지를 사용하였다. (디폴트값이 로컬스토리지이다.)
npm i vuex-persistedstate --force
import { createStore } from 'vuex'
import loginStore from './modules/loginStore'
import refreshtoken from './modules/refreshtoken'
import createPersistedState from 'vuex-persistedstate'
export default createStore({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
loginStore, refreshtoken
},
plugins: [
createPersistedState({
paths: ['loginStore']
})
]
})
기존 코드에서 plugins
만 추가해주면 된다.
개발자도구 - 로컬스토리지에서 vuex
에 관리하는 store
가 들어와있는 것을 볼 수 있다.
vue
에서 호출할 때는 두가지 방식으로 호출할 수 있다.
# state에서 꺼내오기
import loginStore from '../store/index'
data () {
return {
userInfo: loginStore.state.loginStore.userInfo,
}
},
# localstroage에서 직접 꺼내오기
const userInfo = localStorage.getItem('userInfo') // 토큰을 저장함
더 편한 방식을 사용하면 될 것 같다.