Nuxt3에서 캐시된 데이터를 유지하기 위해 useFetch 사용하기

Question

nuxt3를 사용하는 동안 다음과 같은 문제가 발생합니다. 동적 페이지 [slug].vue는 초기 슬러그에 대한 데이터를 올바르게 로드합니다. 페이지를 떠났다가 다시 돌아오면 새 데이터가 로드되지 않고 대신 이전 데이터가 계속 표시됩니다. 이전 데이터로 해당 페이지를 새로 고치면 정상적으로 작동합니다. 이는 새로운 슬러그에 대한 API 호출이 이루어지지 않았기 때문에 발생하는 것 같습니다. 내 [slug.vue] 파일은 다음과 같습니다: <scriptsetuplang="ts">import{ref}from'vue

P粉523625080 · Answer

기본적으로 useFetch, useLazyFetch, useAsyncData 및 useLazyAsyncData는 모두 현재 브라우저 세션에서 처음 가져온 초기 응답 페이로드를 캐시하므로 쓸모 없는 후속 요청이 생성되지 않습니다. (적어도 그 뒤에 있는 아이디어인 것 같아요)

"initialCache" 옵션을 전달하고 "false"로 설정하여 가져온 각 컴포저블의 기본 동작을 변경할 수 있습니다.

참조: https://v3.nuxtjs.org/api /composables/use-async-data#params

P粉464082061 · Answer

위 댓글의 조언을 따르고 여기에서 문서를 확인하세요: https://v3.nuxtjs.org/guide/features/data-fetching/#refreshing-data다음 코드를 시도해 보니 효과가 있었습니다

으아아아

작업 예시: https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,app.vue