pinia의 piniaPluginPersistedstate가 적용이 안 된다.

데이터를 중앙 집중식으로 관리하기 위해 기존에는 Vuex를 사용했었는데

 

?? 대체 언제 Pinia가 공식으로 바뀌었던가..

 

그래서 Pinia로 전면 수정을 하는데 자꾸 persistedstate가 적용이 안 되는 문제가 발생했다.

(이 글을 작성하는 시점은 이 에러를 만난 지 벌써 3시간째)

 

gpt4, also gpt2, 스택오버플로우 전부 확인했지만 실패

 

 

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";
import axios from "axios"; // 전역으로 사용하기 위해 main.js에서 설정

// Axios 인스턴스 생성 및 기본 구성
const axiosInstance = axios.create();

const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
app.use(pinia);

// 라우터 설정
app.use(router);

app.config.globalProperties.$axios = axiosInstance;
// app.config.globalProperties.$apiBaseUrl = "https://restapi.store";
app.config.globalProperties.$apiBaseUrl = "http://localhost:8080";

app.mount("#app");

 

 

store.js

import { defineStore } from "pinia";

export const useMainStore = defineStore(
  "main",
  ....
  ....
  ....
  {
    persist: true,
  }
);

 

 

분명 플러그인도 설치했고 persist : true로 사용하도록 명시했고, main.js도 순서를 확인했다.

 

 

그런데 로컬 스토리지는 감감 무소식이다.

 

그래서 Vue 확장프로그램을 통해 확인했더니 

 

 

여기에는 또 정상적으로 데이터가 찍히는 걸 확인할 수 있었다.(?)

 

왜 로컬 스토리지에 Pinia에 있는 데이터가 안 넘어가는 걸까 대체 왜...

 

---

벌써 고민한 지 하루가 지났다.

import { defineStore } from "pinia";

export const useMainStore = defineStore(
  "main",
  ....
  ....
  ....
  {
    persist: true,
  }
);

import { defineStore } from "pinia";

export const useMainStore = defineStore({
  id: "main",
  ....
  ...
  ...
  persist: {
    enabled: true,
  },
});

 

첫 번째 코드가 기존의 내 코드이고

두 번째 코드가 GPT-4o가 제공해 준 코드이다.

 

첫 번째 내 코드를 보면 

  {
    persist: true,
  }

 

아 이거 작성하면서 계속 찾아보다가 깨달았는데...

 

// 멤버 권한 갱신
    updateMemberRole(payload) {
      this.memberRoles = payload;
    },
  },
  persist: true,
});

 

단순 괄호의 위치로 적용이 안 됐던 것...

 

이제 찾아보니 Options와 setup 방식의 차이라고 한다.

 

Options 방식으로 사용하면 persist를 객체 내에 포함시켜야 한다.

반면에 setup 방식으로 사용하면 세 번째 인자로 전달해줘야 한다고 한다.

 

 

나는 현재 store는 Options 방식으로 작성되어 있어서 객체 내에다가 설정을 포함시켰더니

 

잘 불러오는 걸 확인할 수 있었다..

 

보람찬 2일이었다..