728x90
반응형
Pinia - Persist는 Pinia로 관리하는 상태를 브라우저의 로컬 저장소(LocalStorage)나 세션 저장소(SessionStorage)에 자동으로 저장하고 유지할 수 있도록 도와주는 플러그인입니다. 이를 통해 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열어도 상태를 유지할 수 있습니다.
Pinia - Persist의 주요 특징
- 자동 상태 저장: 스토어의 상태를 자동으로 로컬 저장소나 세션 저장소에 저장합니다.
- 데이터 영속성: 페이지를 새로고침하거나 브라우저를 재시작해도 상태를 유지할 수 있어 사용자 경험이 향상됩니다.
- 설정의 유연성: 어떤 스토어를 어디에 저장할지, 어떤 상태를 저장할지 등 다양한 설정이 가능합니다.
Pinia - Persist 설치 및 사용 방법
- Pinia - Persist 설치:
npm install pinia-plugin-persistedstate
- Pinia 설정: main.js 파일에서 Pinia와 Persist 플러그인을 설정합니다.
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import piniaPersistedState from 'pinia-plugin-persistedstate';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
// Pinia에 persist 플러그인 추가
pinia.use(piniaPersistedState);
app.use(pinia);
app.mount('#app');
- 스토어에서 Persist 사용: 각 스토어에서 persist 옵션을 사용하여 상태를 자동으로 저장할 수 있도록 설정합니다.
- // src/stores/counter.js import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++; }, }, persist: { enabled: true, // persist 활성화 strategies: [ { key: 'counter', // 저장할 때 사용할 키 storage: localStorage, // 저장소 선택 (localStorage or sessionStorage) }, ], }, });
persist 옵션의 주요 설정
- enabled: true로 설정하면 상태 저장이 활성화됩니다.
- strategies: 여러 저장 전략을 정의할 수 있습니다.
- key: 저장할 때 사용할 키 이름을 지정합니다.
- storage: 저장소를 지정합니다. (localStorage 또는 sessionStorage)
사용 예시
예를 들어, 위 예제에서 useCounterStore의 상태인 count는 브라우저의 localStorage에 저장됩니다. 사용자가 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열더라도 count의 값이 유지됩니다.
Pinia - Persist를 사용하는 이유
- 사용자 경험 개선: 사용자가 앱을 새로고침하거나 브라우저를 닫았다가 다시 열 때 상태를 유지해 줌으로써 더 좋은 사용자 경험을 제공합니다.
- 데이터 영속성: 장바구니, 로그인 상태, 사용자 설정 등 중요한 데이터의 상태를 쉽게 유지할 수 있습니다.
- 간단한 설정: Pinia 스토어에서 간단한 설정만으로 상태의 영속성을 추가할 수 있습니다.
요약
Pinia - Persist는 Pinia의 상태를 브라우저 저장소에 자동으로 저장하고 복원하는 기능을 제공합니다. 이를 통해 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열어도 상태를 유지할 수 있어, 사용자 경험을 향상시키는 데 도움이 됩니다.
728x90
반응형