[Vue.js] Vue2 => Vue3로 이전하며 Pinia가 localStorage에 데이터를 저장하지 않았던 이슈!

Vue2에서 Vue3로 이전하며 기존에 정상적으로 동작하던 Pinia가 데이터를 localStorage 저장하지 못했다. 사실 이슈라기 보다는 그냥 단순히 세팅의 문제였는데, 다음에 똑같은 일이 발생하지 않기 위해 기록한다!

 

기존 package.json

  "dependencies": {
...
    "pinia": "...",
    "pinia-plugin-persistedstate": "...",
...
  },

 

신규 package.json

  "dependencies": {
...
    "pinia": "...",
    "pinia-plugin-persist": "...",
...
  },

우선 Pinia 데이터를 전역으로 공유하기 위해 데이터를 sessionStorage나 localStorage등에 저장하는 것을 도와주는 라이브러리를pinia-plugin-persistedstate에서 pinia-plugin-persist로 변경했다. (사실 변경하지 않아도 될 것 같은데 우선 가이드대로 했다.)

 

 

기존 @/stores/index.ts

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

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

export default pinia;

 

신규 @/stores/index.ts

import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;

기존에는 Pinia의 추가 라이브러리를 위처럼 @/stores/index.ts에서 세팅했는데, 새로 작성했을 때는 그렇게 하지 않고 main.ts에서만 처리했다.

 

 

기존 main.ts

import Vue from "vue";
import App from "@/App.vue";
...
import { PiniaVuePlugin } from "pinia";
import pinia from "@/stores";

Vue.use(PiniaVuePlugin);

...

new Vue({
  pinia,
...
  render: (h) => h(App),
}).$mount("#app");

 

신규 main.ts

import { createApp } from "vue";
import App from "@/App.vue";
import { createPinia } from "pinia";
import piniaPersist from "pinia-plugin-persist";
...

const pinia = createPinia();
pinia.use(piniaPersist);

const app = createApp(App);
app.use(pinia);
...
app.mount("#app");

형태만 살짝 다르고 크게 다르지 않다.

 

 

기존 user.ts (store)

import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  state: () => {...},
  getters: {...},
  actions: {..},
  persist: true
});

 

신규 user.ts (store)

import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  state: () => {...},
  getters: {...},
  actions: {..},
  persist: {
    enabled: true,
    strategies: [{ storage: localStorage }],
  },
});

위를 보면 persist 옵션이 살짝 다르다. 기존 라이브러리는 persist: true만 돼 있으면 localStorage를 default로 사용하는데, 이 라이브러리는 위처럼 localStorage를 사용하고 싶으면 localStorage를 명시해줘야한다.(default: sessionStorage)

 

 

결과 :

위 처럼 'user'를 key로한 데이터가 localStorage에 잘 저장이 된다!