[Vue] Vuex 새로고침 후 데이터 유지 방법 (초기화 발생 이유/ 예제)

서론

---

Vuex라는 상태관리 패턴을 사용한 페이지에선 새로고침을 하면 State에 저장해놓은 데이터가 초기화된다.

하여, 해당 데이터들이 사라지는 현상에 대해서 어떻게 해결할지 알아보려한다.

내용은 생각보다 간단하니 따라하기만 하면 쉽게 해결할 수 있다.

---

 

npm vuex-persistedstate 사용하기

---

필자는 vuex-persistedstate라는 npm을 사용하여 해당 이슈를 해결하려한다.

vuex-persistedstate ?

vuex에 저장되는 값(State)들을 사용하는 웹 브라우저의 LocalStorage에 저장하여, 새로고침 시에도 해당 로컬스토리지의 값은 없어지지 않기 때문에 해당 값을 가져와 동기화시켜주는 역할을 한다.

아래에서 추가 설명을 하겠지만 해당 기능을 모든 페이지에 적용하면 LocalStorage에 모든 값들이 저장될 수 있으니 사용자 속도 이슈가 발생할 수 있다. 그러기에 원하는 페이지에만 적용하여야 한다.

해당 방법은 아래에서 다뤄보자.

---

 

해결 방법

---

1. npm 설치

npm install --save vuex-persistedstate

 

2. Vuex(Store) - index.js 플러그인 추가

import Vue from 'vue'
import Vuex from 'vuex'
import pathify from '@/plugins/vuex-pathify'
import axios from 'axios'
import * as modules from './modules'

// 데이터 유지를 위해 import
import createPersistedState from 'vuex-persistedstate';


Vue.prototype.$http = axios

Vue.use(Vuex)
const state = {}
const getters = {}
const mutations = {}
const actions = {}

const store = new Vuex.Store({
  modules,
  state,
  getters,
  mutations,
  actions,
  plugins: [
    pathify.plugin,    
    createPersistedState({
      paths: ["noticeStore"]
    })
  ],
})

store.dispatch('appStore/init')
export default store
export const ROOT_DISPATCH = Object.freeze({ root: true })

위의 전체소스는 참고하면 될 것 같고 아래의 소스를 추가해주면 된다.

소스 추가

import createPersistedState from 'vuex-persistedstate';

  plugins: [
    createPersistedState({
      paths: ["noticeStore"]
    })
  ],

위와 같이 설정을 해주었고 만약 createPersistedState에서 paths없이 단일로 작성한다면 모든 페이지의 데이터가 로컬 스토리지에 저장이 되기 떄문에 사용자가 여러 페이지를 넘나들 수 록 페이지가 느려지는 현상을 겪을 수 있다.

그렇기에 본인이 로컬스토리지에 저장하여 새로고침을 해도 날라기지 않기를 원하는 페이지에만 작성하기를 권장한다.

---

 

LocalStorage 데이터 확인 방법

---

1. 개발자 모드 접속
2. 애플리케이션 클릭
3. 아래 이미지 확인

위와 같이 데이터가 들어가는것이 확인되었다면 해당 페이지에서 새로고침을 하여도 데이터가 초기화되지 않는 것을 확인할 수 있을 것이다.