Vue3 LocalStorage는 구성 요소가 렌더링된 후에 설정됩니다.

Question

사용자 데이터를 로드하는 탐색 모음이 있는데, 이 모든 것은 사용자가 앱에 성공적으로 로그인한 후에 발생합니다. 문제는 navbar를 로드한 후 localStorage를 약간 설정해야 한다는 것입니다. setTimeout()으로 래핑하면 모든 것이 잘 작동하지만 변수는 사용자 활동에 따라 변경될 수 있으므로 본질적으로 반응형이 되는 것이 좋습니다.

Toolbar.vue

으아악

관찰자를 사용하고 setup() 및 data()를 사용해 보았지만 아무것도 제대로 작동하지 않는 것 같습니다. 앞서 언급했듯이 setTimeout()은 작동하지만 시간 초과를 수동으로 트리거하는 것을 피하고 vue가 원하는 방식으로 작업을 처리하도록 하는 것이 좋습니다.

간단한 예시인데, localStorage 항목셋이 없어서 더미코드측을 설정할 수 없습니다.

몇 가지 추가 컨텍스트를 위해 사용자가 로그인한 후 async()를 사용하여 API를 호출하여 계정 정보를 가져오고 계정 데이터를 localStorage에 저장합니다. 라우터가 탐색 표시줄 영역을 로드하려고 시도하고 있는 것 같습니다. 이것이 바로 구성 요소가 설치될 때 localStorage 프로젝트를 사용할 수 없는 이유입니다.

사용해야 할 vue3 단어는 모르지만 이상적으로는 ref()가 내가 생각한 대로 작동하지 않는 것 같기 때문에 localStorage에 대한 일종의 async/await 호출을 갖고 싶습니다. ref()가 localStorage가 업데이트되는 것을 보지 못하는 것과 같습니다.

localStorage의 동기화가 주요 문제입니다.

Answer 1

설치된 수명 주기 후크를 사용하세요. 그리고 그곳에서 사용자 정보를 초기화합니다