Nuxt 3: useAsyncData 및 $fetch는 한 번만 작동합니다.

Question

저는 프로젝트에서 nuxt 3을 사용하고 있으며 /server/api/ 디렉토리에 있는 TypeScript 파일에 요청하고 싶습니다. 하지만 app.vue 파일에서 이 작업을 수행하면:

으아악

이 함수 createPerson을 호출할 때:

으아악

내 앱은 "/api/file"을 한 번만 가져오고 다시 가져오지 않습니다. useAsyncData에서 제공하는 새로 고침 기능을 사용하면 버튼을 처음 클릭할 때 두 번 가져오고 그 후에 한 번 가져옵니다.

Answer 1

질문에 답변하려면 AsyncData를 사용하여 요청을 강제로 새로 고칠 수 있는 키를 추가해야 합니다. 다시 가져오기가 발생하지 않는 이유는 createPerson 키가 변경되지 않고 그대로 유지되어 다시 가져오기가 수행되지 않기 때문입니다. 따라서 여러분이 해야 할 일은 즐겨 사용하는 useAsyncData 메서드를 사용하여 임의의 키를 생성하는 것뿐입니다

으아악

키 걱정 없이 새로 고침 기능을 사용할 수도 있습니다. 이 문서를 확인하세요 https://nuxt.com/docs/getting-started/data-fetching#refreshing-data