[Vuejs] vuex보다 편한 pinia에서의 세션 스토리지(sessionStorage) 적용 방법

 

vuex 환경에서 세선스토리지(sessionStorage)나 로컬스토리지(localStorage)를 사용하기 위해서는 아래와 같은 방법을 사용 하였습니다.

1. window 객체인 sessionStorage를 직접 적용하여 줍니다.
2. vuex-persistedstate 모듈을 추가 합니다(npm i vuex-persistedstate)
3. pinia-plugin-persistedstate 모듈을 추가 합니다(npm i pinia-plugin-persistedstate)

 

첫번째 방법은 일단 손도 많이가고 간단한 설정을 할 수 없기에 두번째 방법을 주로 사용하는데..

vuex-persistedstate 모듈(라이브러리)을 사용하기 위해 npm에 접속 해 보았더니..

deprecate 되었습니다.

 

디프리케이티(deprecated)드 되어버린 상태로 검색 결과가 나왔습니다.

사용하는 데 문제는 없겠지만 더 이상 지원하지 않기에 다른 방안을 모색하는게 좋을 것 같았습니다.

 

vuex에서 위 2가지 방법을 적용하는 것 보다, 뷰에서 상태관련 라이브러리로 공식적으로 vuex에서 대체한 pinia(피니아)를 사용하여 세션스토리지나 로컬스토리지를 적용 해 보기로 하였습니다.

vuex는 이제 유지보수만 해줄 뿐 새로운기능은 추가되지 않는 다 합니다.

 

피니아는 vuex의 다음 버전의 새로운 vuejs에서의 상태관리 라이브러리 입니다.

파인애플인가?

 

새로운 버전 답게 사용법도 훨씬 간단하고 내용 또한 어렵지가 않습니다.

 * 기존의 mutaion 부분과 action 부분을 1개의 action으로 합친 것만 보아도 행복 합니다..

 * 더욱이 헬퍼클래스가 필요 없습니다.

 

설정을 위해서 2개의 라이브러리(모듈)가 필요 합니다.

1. 상태 : yarn add pinia  
2. 저장소 : yarn add pinia-plugin-persistedstate

 

기본적으로 피니아 사용법은 vuex와 거의 동일 합니다.

먼저 메인파일에서 추가한 저장소를 pinia가 사용하도록 정의하여 줍니다.

import { createPinia } from 'pinia' //피니아
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //피니아

const application = createApp(App)

const pinia = createPinia()  //피니아 생성
pinia.use(piniaPluginPersistedstate)  //모듈추가
application.use(pinia)  //뷰에 추가

 

아래는 피니아를 통하여 만든 샘플 로그인과 관련된 store 객체의 모습 입니다.

//잘못된 코드....
//import { defineStore } from "pinia";  //yarn add pinia
// import { useStorage, useSessionStorage } from '@vueuse/core';  //yarn add @vueuse/core

// let store = {

//   state: () => ({ info: useSessionStorage('info', { id: null, access: null } ) }),
//   actions: {
//     //함수들..
//   },
//   getters: {
//     //get 객체들
//   },
// };

// export default defineStore("내보낼이름", store);


import { defineStore } from 'pinia'

export const 내보낼이름 = defineStore('고유키', {
  persist: {
    storage: sessionStorage //쓰고싶은 스토리지(세션 또는 로컬)
  },
  state: () => {
    return {
      //원하는상태
    }
  },
  actions: {
    //원하는 함수
  },
  getters: {
    //원하는 getter
  }
})

 

위 코드는 info 라는 키 값에 id 필드와 access 필드를 추가하였습니다.

이러한 스토어 객체는 persist 부분에 세션 또는 로컬 스토리지를 명시하여 원하는 저장소에 저장되도록 할 수 있습니다.

sessionStorage 

localStorage

 

간단한 설정으로 끝낼 수 있는 피니아(pinia)에서의 저장소 관리 방법!
vuex에서 피니아로 이제 넘어갔으니 해당 기능을 도입하는 것도 고려해볼 법 합니다.

 

이상으로 vuex보다 편한 pinia에서의 세션 스토리지(sessionStorage) 적용 방법에 대해서 살펴 보았습니다.

궁금한점 또는 다른 의견은 언제든 환영 입니다! 👻