pinia-persistedstate 적용시키기(새로고침시 State 초기화)

Vue에서 Pinia를 사용하여 정보를 관리하는 경우에 새로고침을 하는 경우 저장된 데이터가 날아간다.

새로고침시 store값 날아가는경우 pinia-persistedstate를 사용하여 초기화 방지가 가능하다.
localStore에 저장 or 쿠키에 저장 선택가능하다

 

검색키워드

pinia-persistedstate store setup

pinia-persistedstate with composition api 등등

참고중인 페이지

Composition API on pinia-plugin-persistedstate?

From the vuejs community on Reddit

공식사이트

Getting Started | pinia-plugin-persistedstate

Getting Started | pinia-plugin-persistedstate

설치

npm i pinia-plugin-persistedstate

기본main.js 세팅

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

 

스토어 별로 생성하면서 거기에 특정 state만 관리한다거나 하는 형태로도 선택 할 수 있다.
또한 글로벌(전역) 하게 세팅하여 사용 할 수도 있다..!

 

로컬 스토리지를 사용하면서 모든 store에 적용시키려고 한다면 다음과 같이 가능하다.
만약 특정 스토어만 제외시키고 싶다면 그 스토에 옵션값으로 끄면된다.

import { createPersistedState } from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(createPersistedState({
    storage: localStorage,
    auto: true,
}))

 

반대로 특정 스토어만 적용하고자 하는경우

import { defineStore } from 'pinia'

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('hello pinia')
    return { someState }
  },
  {
    persist: true,
  },
)