[Vue3, Pinia 도와주세요..!!] 새로고침 하지 않아도 Store getters를 읽어오는 방법

Question

Vue3 전문가 선배님들 도와주세요!!🙏 vue3와 pinia를 사용했습니다. 로그인 버튼을 클릭하면 User.token에 토큰을 저장하고 router.push('/')를 통해 Main 페이지로 이동합니다. 그럼 로그인에 여부(isAuthenticated)에 따라 Header가 변경되도록 하고 싶습니다. 그러나 Header에서 1번 방법으로 하면 token이 로컬스토리지에 잘 저장되었음에도 헤더가 바로 변경되지 않는 문제가 있습니다. 문제 해결을 위해서 저는 Header.vue에서 1번, 2번 방법을 모두 사용해보았는데요. 2가지 방법이 어떤 차이가 있어서 결과가 다른건지 잘 이해가 가지 않습니다. 1번은 Store에서 computed를 사용했고 그 결과를 불러오는 왔고, 2번은 Store에서 computed를 사용한값을 또 다시 computed를 통해 읽어들이고 있다는 차이인 것 같은데.. 결과가 왜 다른건지 이해가 가지 않습니다.1번 방법 결과 : 로그인 버튼 클릭 후 메인페이지로 이동하면 헤더가 바로 변경되지 않고, 새로고침을 해야 헤더가 변경됨2번 방법 결과: 로그인 버튼 클릭 후 메인페이지로 이동하면 헤더가 잘 변경됨 이 방법 외에 router.push가 아닌 location.href를 사용해서 새로고침하면 잘 적용되긴 하는데, 이 방법 말고 다른 방법을 사용해보고 싶어서 질문남깁니다!// store/sign.ts import { defineStore } from 'pinia'; import { computed, ref } from 'vue'; export const useSignStore = defineStore('sign', () => { // State const User = ref({ msg: '', status: '', token: localStorage.getItem('token') || '', userId: localStorage.getItem('userId') || '', usertype: localStorage.getItem('usertype') || '', company: localStorage.getItem('company') || '', username: localStorage.getItem('username') || '', cellphone_available: localStorage.getItem('cellphone_available') || null, web_token: '', }); // Getters const isAuthenticated = computed(() => { return !!User.value.token; }); return { User, isAuthenticated }; })// Header.vue

회원가입

로그인

컴포지트 · Answer

https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event 로컬 스토리지를 통해 새로고침 없이 변경 데이터를 추적하려면, 추적할 빌미를 제공해 줘야 합니다. 로컬 스토리지에도 이벤트가 있습니다. 위 링크 참고하셔서 구현해 보시길. pinia persistent 에 대해 검색하면 예) https://seb-l.github.io/pinia-plugin-persist/

하태연 · Answer

음..router에서 Navigation guards 활용하시면 원하시는 기능 잘 작동하실 겁니다.

[Vue3, Pinia 도와주세요..!!] 새로고침 하지 않아도 Store getters를 읽어오는 방법

2개의 답변

Q&A 목록