refreshNuxtData

ソース
Nuxt内のすべてのasyncDataインスタンスまたは特定のasyncDataインスタンスを更新します

refreshNuxtDataは、useAsyncData、useLazyAsyncData、useFetch、useLazyFetchなど、すべてまたは特定のasyncDataインスタンスを再フェッチするために使用されます。

コンポーネントが<KeepAlive>によってキャッシュされ、非アクティブな状態になった場合でも、コンポーネントがアンマウントされるまで、コンポーネント内のasyncDataは再フェッチされ続けます。

タイプ

署名
export function refreshNuxtData (keys?: string | string[])

パラメーター

  • keys: データをフェッチするために使用される単一の文字列または文字列の配列としてのkeysです。このパラメータはオプションです。 keysが明示的に指定されていない場合、すべてのuseAsyncDataおよびuseFetchキーが再フェッチされます。

戻り値

refreshNuxtDataは、すべてまたは特定のasyncDataインスタンスが更新されたときに解決されるPromiseを返します。

例

すべてのデータを更新

以下の例では、NuxtアプリケーションでuseAsyncDataおよびuseFetchを使用してフェッチされているすべてのデータを更新します。

app/pages/some-page.vue
<script setup lang="ts">
const refreshing = ref(false)

async function refreshAll () {
  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およびuserと一致するデータのみを更新します。

app/pages/some-page.vue
<script setup lang="ts">
const refreshing = ref(false)

async function refresh () {
  refreshing.value = true
  try {
    // you could also pass an array of keys to refresh multiple data
    await refreshNuxtData(['count', 'user'])
  } finally {
    refreshing.value = false
  }
}
</script>

<template>
  <div v-if="refreshing">
    Loading
  </div>
  <button @click="refresh">
    Refresh
  </button>
</template>
asyncDataインスタンスにアクセスできる場合は、そのrefreshまたはexecuteメソッドを使用してデータを再フェッチすることが推奨されます。
Docs > 4 X > Getting Started > Data Fetching で詳細をご覧ください。