[Vue.js 3] 새로고침 데이터 유지(pinia-plugin-persistedstate-2)

import { defineStore } from 'pinia';
import { ref } from '@vue/reactivity';

export const IndexStore = defineStore('IndexStore', () => {
    const isLogin = ref(false); // login true or false

    return {
        isLogin,
    };
}, {
    persist: true
});

새로고침을 해도 로그인 상태를 유지해야한다.

그래서 알아본게 vuex-persistedstate다.

그런데

npm에서 검색해본 vuex-persistedstate

이렇게 빨간 글씨로 경고문구가 있으면 사용하지 않는 것이 안전하다고 생각되어 한참 고민하다가 알게되었다.

 

pinia-plugin-persistedstate-2

npm에서 검색해본 pinia-plugin-persistedstate-2

간단히 설명하자면 store에 있는 값을 로컬스토리지에 저장해준다.

 

설치방법

 

1. npm install

npm install --save pinia-plugin-persistedstate-2

2. src/main.js 추가

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import i18n from './i18n';
import './styles/app.css';
import { createPinia } from 'pinia';
import { createPersistedStatePlugin } from 'pinia-plugin-persistedstate-2';

const pinia = createPinia();
const PersistedStatePlugin = createPersistedStatePlugin();
pinia.use((context) => PersistedStatePlugin(context));

createApp(App).use(i18n).use(pinia).use(router).mount('#app');

 

3. src/store/index.js

import { defineStore } from 'pinia';
import { ref } from '@vue/reactivity';
// import { useStorage } from '@vueuse/core';

export const IndexStore = defineStore('IndexStore', () => {
    const isLogin = ref(false); // login true or false vlaue
    
    return {
        isLogin
    };
}, {
    persist: true
});

 

이렇게 하면 적용이 된거다!

 

나는 로컬 스토리지에 저장되는 것 자체가 내가 원하던 것이 아니기에 다른 방법을 또 찾아야 한다.

로컬 스토리지에 저장된 값 확인