refreshNuxtData

refreshNuxtData는 서버에서 모든 데이터를 다시 가져오고 페이지를 업데이트한다.

refreshNuxtData 은 서버에서 모든 데이터를 다시 가져오고 페이지를 업데이트하며, useAsyncData, useLazyAsyncData, useFetch 및 useLazyFetch 의 캐시를 무효화 시킨다.

 

Type

refreshNuxtData(keys?: string | string[])

 

매개변수

• keys (선택 사항) : refreshNuxtData 단일 또는 문자열 배열을 key 값으로 선택합니다. key 가 지정되지 않으면 모든 useAsyncData 및 useFetch 는 다시 페치를 시작한다.
  • type : String | String[]

 

모든 데이터 초기화

아래 예에서는 현재 페이지에서 useAsyncData 및 를 useFetch 사용하여 가져오는 모든 데이터를 새로 고친다.

<!--
pages/some-page.vue
-->

<script setup lang="ts">
const refreshing = ref(false)
const refreshAll = async () => {
  refreshing.value = true
  try {
    await refreshNuxtData()
  } finally {
    refreshing.value = false
  }
}
</script>

<template>
  <div>
    <button :disabled="refreshing" @click="refreshAll">
      Refetch All Data
    </button>
  </div>
</template>

 

특정 데이터 초기화

아래 예는 count 키가 일치하는 데이터만 새로 고친다.

<!-- 
pages/some-page.vue
-->

<script setup lang="ts">
const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
const refresh = () => refreshNuxtData('count')
</script>

<template>
  <div>
    {{ pending ? 'Loading' : count }}
  </div>
  <button @click="refresh">Refresh</button>
</template>

문서) Nuxt-개요 > 데이터 가져오기