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

Question

nuxt3를 사용할 때 다음과 같은 문제가 발생했습니다.

• 동적 페이지[slug].vue초기 슬러그의 데이터를 올바르게 로드
• 페이지를 나갔다가 다시 돌아오면 새 데이터가 로드되지 않지만 이전 데이터가 계속 표시됩니다.
• 이전 데이터로 해당 페이지를 새로 고치면 정상적으로 작동합니다.

이런 현상은 새로운 슬러그에 대한 API 호출이 이루어지지 않았기 때문에 발생하는 것 같습니다.

내 [slug.vue] 파일은 다음과 같습니다:

으아아아

전체 설정은 stackblitz에서 볼 수 있습니다: https://stackblitz.com/edit/nuxt-starter-mkgfrw?file=pages%2F[slug].vue,pages%2Findex.vue

Answer 1

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

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

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

Answer 2

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

으아아아

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