[Vue] Pinia 새로고침 시 자료 없어짐 해결

Pinia를 사용하여 유저정보를 페이지에 사용하고 있는데, 새로고침 시 데이터가 초기화 되는 것을 확인했다. 찾아보니 pinia나 redux같은 상태 관리 라이브러리들은 데이터를 따로 저장해두는 곳이 없어서, 새로고침 시 데이터가 사라진다고 한다.

 

이를 해결하려면 pinia에서는 pinia-plugin-persistedstate를 사용해야한다.

pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

 

이후 main.js에서 pinia.use(piniaPluginPersistedstate)로 라이브러리 사용을 등록해준다.

// main.js
import { createApp } from 'vue';

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

import App from './App.vue';
import router from './router';

const app = createApp(App);

// pinia 설정
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia);

app.use(router);

app.mount('#app');

 

그리고 사용할 store에 가서 persist을 true로 바꿔준다.

// userManage.js
import { defineStore } from "pinia"

export const useUserStore = defineStore("user", {
  state: () => ({
    userName: null,
  }),
  getters: {

  },
  actions: {},
  // 새로고침해도 안바뀜.
  persist: true
})

 

이렇게하면 새로고침을해도 데이터가 잘 유지된다!

---

깃허브 주소

https://github.com/Anhye0n/

Anhye0n - Overview