[vue3-pinia] 04. pinia-plugin-persistedstate

이번 포스트에서는 pinia에서 사용할 수 있는 persistant plugin 에 대해 살펴보자.

 

pinia-plugin-persistedstate

 

기존 상황의 문제점? 특징!

이제까지 간단하게 pinia를 통해 app 전역의 상태를 관리할 수 있었다. 열심히 할 일도 추가하고 완료된 일들을 필터링 할 수도 있었는데 새로고침을 한번 하는 순간 어떤 문제가 발생할까?

pinia는 단순히 javascript에서 객체로 정보를 관리하기 때문에 새로고침 하는 순간 처음으로 reset 된다. 그럼 어떻게 하면 이런 정보를 지속성있게 저장할 수 있을까?

클라이언트에서 브라우저를 이용하면서 사용할 수 있는 저장소는 당연히 storage이다. 우리는 store를 구독(또는 watch)하고 있다가 변경이 발생할 때마다 store의 state들을 storage에 저장하면 된다! 그리고 초기화 되는 경우 storage에 저장된 정보를 이용해서 store의 state를 복구해주면 된다.

안되는건 아닌데 귀찮음이 언제나 문제다.ㅠㅠ

pinia-plugin-persistedstate 기본 설정

이런 고민을 조금이나 덜어줄 수 있는 plugin이 pinia-plugin-persistedstate이다.

https://prazdevs.github.io/pinia-plugin-persistedstate/guide/

Getting Started | pinia-plugin-persistedstate

 

사용법은 매우 단순하다. 일단 인스톨 해보자.

npm i pinia-plugin-persistedstate

다음으로 pinia 객체에 위 플러그인을 설치해준다.

import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)

const pinia = createPinia()
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
pinia.use(piniaPluginPersistedstate)

 

다음으로 각각의 store에 영속성을 추가할 것인지 옵션을 추가해주면 끝이다. 즉 defineStore의 3번째 extra option 객체의 속성으로 persist:true를 추가해주면 된다.

export const useCounterStore = defineStore('counter', 
                                           () => {  /*스토어 setup*/ }, 
                                           { persist:true}
)

이렇게 설정이 완료되면 기본 설정에 의해 동작하는데 localstorage를 살펴보면 store id를 키로 state 정보가 예쁘게 저장된 것을 확인할 수 있다.

이제 직접 지우기 전까지는 존재한다.

 

속성 수정

플러그인은 기본 설정으로 동작하는데 이를 수정하기 위해서는 persist에 객체 형태로 수정할 내용을 전달한다.

속성명	설명	기본값	예
key	저장소의 키캆	store.$id	key:my-custom-key
storage	사용할 저장소	localStorage	storage:sessionStorage
paths	저장할 state 목록 생략 시 전체	undefined	저장할 state의 경로 paths:[“todos”]
beforeRestore	복구 전에 호출될 콜백 등록 함수	undefined	beforeRestore: (ctx) => {   console.log(`about to restore '${ctx.store.$id}'`) }
afterRestore	복구 후에 호출될 콜백 등록 함수	undefined	afterRestore: (ctx) => {   console.log(`just restored '${ctx.store.$id}'`) }

다음의 설정은 todos.js의 state 중 todos와 key만 stssionStorage에서 관리하기 위한 내용이다.

persist:{
  key:'mytodos',
  storage:sessionStorage,
  paths: ['todos', 'key'],
  beforeRestore:(ctx => console.log(`store 복구 시작: ${ctx.store.$id}`)),
  afterRestore:(ctx => console.log(`store 복구 완료: ${ctx.store.$id}`))
}