데이터를 중앙 집중식으로 관리하기 위해 기존에는 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일이었다..
'오류해결' 카테고리의 다른 글
mysql.cj.jdbc.Driver에 빨간글씨가 뜨는 문제 (1) | 2024.09.22 |
---|---|
스프링 시큐리티에서 인증 후 CSRF 토큰 갱신 문제 (0) | 2024.08.07 |
스프링 시큐리티 permitall이 먹지 않는 상황 발생 (0) | 2024.04.16 |
QClass import가 불가능한 문제 (0) | 2024.04.16 |
데이터를 중앙 집중식으로 관리하기 위해 기존에는 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일이었다..
'오류해결' 카테고리의 다른 글
mysql.cj.jdbc.Driver에 빨간글씨가 뜨는 문제 (1) | 2024.09.22 |
---|---|
스프링 시큐리티에서 인증 후 CSRF 토큰 갱신 문제 (0) | 2024.08.07 |
스프링 시큐리티 permitall이 먹지 않는 상황 발생 (0) | 2024.04.16 |
QClass import가 불가능한 문제 (0) | 2024.04.16 |