Vue - Vuex, Pinia 새로고침해도 상태 유지하기

 

Vuex나 Pinia 같은 상태 관리 라이브러리를 사용하면서 store의 데이터를 사용하고 있는 페이지에서 새로고침을 하게 되면,

데이터가 사라지게 되는데, 이러한 문제점을 쉽게 해결하여 상태를 유지할 수 있게 해주는 플러그인의 사용법을 간단히 적어봅니다. 

 

vuex를 사용하고 있다면 vuex-persistedstate를,  Pinia를 사용하고 있다면 pinia-plugin-persistedstate을 예로 작성하였으니 필요한 부분을 참고하시면 됩니다.

 

 

 

Vuex를 사용하고 있다면... 이곳을

vuex-persistedstate의 사용법을 설명하기 전에...

 

vuex-persistedstate는 제작자가 더 이상 일상 업무 중에 vue를 사용하지 않게 되어, 공식적으로 더 이상 업데이트를 하지 않을 것이라고 선언하였습니다.

그래서 이것을 대안 할 수 있는 persisted-state-vuex라는 플러그인이 있는데 현재 개발자가 아주 열심히 업데이트 중입니다.

(이름도 비슷하고 사용법도 비슷합니다)

 

크게 차이점이 없기에 비교는 직접 아래 깃헙페이지를 구경하며 해보시는 것을 추천드리며, 

이 글에서는 vuex-persistedstate를 기준으로 설명합니다. 

익숙한 것도 있고, 여기저기 설명 찾아보면 죄다 구버전 방식으로 설명을 해놓은 곳이 많기에...

vuex-persistedstate GitHub >

persisted-state-vuex GitHub >

 

 

 

1-1. npm 설치

npm install vuex-persistedstate

 

 

1-2. 등록

  설치가 완료되었다면 store.js 파일 상단에 다음과 같이 import 한 후, 

  아래쪽에 plugins 한줄만 추가해주면 끝입니다.

(store.js)

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'; // <-- 추가

const store = createStore({
...
    plugins: [createPersistedState()],  // <-- 추가
...
})

 

  이렇게만 작성해주면 store의 모든 값이 localStorage에 저장됩니다.

  여기까지가 기본 사용법이고, 이렇게 되면 프로젝트가 커질수록 모든 값이 저장되다 보니 점점 무리를 하게 되는데,

  이럴땐 다음처럼 스토어를 모듈화 시켜서 선택한 스토어만 저장하는 방법도 있습니다.

 

 

 

2-1. 새로운 파일 생성

  userID만 따로 저장하는 예

(account.js)

const state = {
  userId: null
};

const mutations = {
  logout(state) {
    state.userId = null;
  },
  login(state, userId) {
    state.userId = userId;
  }
};

export default {
  state,
  mutations
}

 

 

2-2. 위에서 만든 모듈을 추가

  아래는 위에서 만든 account와 dataStorage라는 2개의 모듈을 추가한 예)

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate';
import account from './modules/account.js'  // <-- 분리한 모듈 추가
import dataStorage from './modules/dataStorage.js'  // <-- 분리한 모듈 추가(내용 생략)


const store = createStore({
    modules: {    // <-- 모듈 추가
        account, dataStorage
    },
    plugins: [
        createPersistedState({
            paths: ['account', 'dataStorage'],  // <-- 패스 추가
        })
    ]
})

 

 

2-3. 저장되는 방식

각각의 모듈 이름 내부에 해당 자료들이 들어가게 되고, 아래와 같이 사용할 수 있습니다.

    data() {
        return {
            pageNumber: 0,
            chartFullData: [...this.$store.state.dataStorage.finalData], // <-- 이러한 식으로 꺼내서 사용합니다. (실제로 쓸땐 줄여서 쓰세요)
            pageSize: 10,
        }
    },

 

 

 

 

Pinia를 사용하고 있다면... 이곳을

Pinia의 상태 유지 플러그인 vuex-persistedstate 에 관한 사용법 안내입니다.

예제는 피니아 소개글(Vue - Pinia (Vue 상태 관리 라이브러리))에서 작성하였던 예제 그대로 이어집니다.

 

 

(1) Pinia 설치

npm i pinia-plugin-persistedstate
또는
yarn add pinia-plugin-persistedstate

 

 

(2) Pinia 플러그인에 추가

(main.js)

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'. //<-- 추가
import App from './App.vue'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)  // <-- 추가
const app = createApp(App)

app.use(pinia)
app.mount('#app')

 

 

(3) presist 옵션 추가

유지하고자 하는 store에 persist 옵션 추가

(stores/counter.js)

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => {
    return { 
        count: 0,
    };
  },
  actions: {
    increment() {
      this.count ++
    },
  },
  getters: {
    doubleCount: (state) => {
      return state.count * 2;
    },
    doublePlusOne() {
      return this.doubleCount + 1
    },
  },
  persist: true,  // <-- 추가
});

 

※ pinia는 모듈 형식이 아니기 때문에 원하는 store에 각각 추가해주면 됨.

 

vuex-persistedstate GitHub >