useNuxtData

ソース
データフェッチングコンポーザブルの現在のキャッシュ値にアクセスします。
useNuxtData は、明示的に提供されたキーを使用して、useAsyncData、useLazyAsyncData、useFetch、および useLazyFetch の現在のキャッシュ値へのアクセスを提供します。

使用方法

useNuxtData コンポーザブルは、useAsyncData、useLazyAsyncData、useFetch、および useLazyFetch などのデータフェッチングコンポーザブルの現在のキャッシュ値にアクセスするために使用されます。データフェッチ中に使用されたキーを提供することで、キャッシュされたデータを取得し、必要に応じて使用できます。

これは、すでにフェッチされたデータを再利用したり、Optimistic Updates やカスケードデータ更新などの機能を実装したりすることで、パフォーマンスを最適化するのに特に役立ちます。

useNuxtData を使用するには、データフェッチングコンポーザブル (useFetch、useAsyncData など) が明示的に提供されたキーで呼び出されていることを確認してください。

パラメータ

  • key: キャッシュされたデータを識別する一意のキー。このキーは、元のデータフェッチ中に使用されたキーと一致する必要があります。

戻り値

  • data: 提供されたキーに関連付けられたキャッシュデータへのリアクティブな参照。キャッシュデータが存在しない場合、値は null になります。この Ref は、キャッシュされたデータが変更されると自動的に更新され、コンポーネントでのシームレスなリアクティビティを可能にします。

例

以下の例は、最新のデータがサーバーからフェッチされている間に、キャッシュされたデータをプレースホルダーとして使用する方法を示しています。

app/pages/posts.vue
<script setup lang="ts">
// We can access same data later using 'posts' key
const { data } = await useFetch('/api/posts', { key: 'posts' })
</script>
app/pages/posts/[id].vue
<script setup lang="ts">
// Access to the cached value of useFetch in posts.vue (parent route)
const { data: posts } = useNuxtData('posts')

const route = useRoute()

const { data } = useLazyFetch(`/api/posts/${route.params.id}`, {
  key: `post-${route.params.id}`,
  default () {
    // Find the individual post from the cache and set it as the default value.
    return posts.value.find(post => post.id === route.params.id)
  },
})
</script>

楽観的更新 (Optimistic Updates)

以下の例は、useNuxtData を使用して楽観的更新を実装する方法を示しています。

楽観的更新とは、サーバー操作が成功すると仮定して、ユーザーインターフェースを即座に更新する手法です。操作が最終的に失敗した場合、UI は以前の状態にロールバックされます。

app/pages/todos.vue
<script setup lang="ts">
// We can access same data later using 'todos' key
const { data } = await useAsyncData('todos', () => $fetch('/api/todos'))
</script>
app/components/NewTodo.vue
<script setup lang="ts">
const newTodo = ref('')
let previousTodos = []

// Access to the cached value of useAsyncData in todos.vue
const { data: todos } = useNuxtData('todos')

async function addTodo () {
  await $fetch('/api/addTodo', {
    method: 'post',
    body: {
      todo: newTodo.value,
    },
    onRequest () {
      // Store the previously cached value to restore if fetch fails.
      previousTodos = todos.value

      // Optimistically update the todos.
      todos.value = [...todos.value, newTodo.value]
    },
    onResponseError () {
      // Rollback the data if the request failed.
      todos.value = previousTodos
    },
    async onResponse () {
      // Invalidate todos in the background if the request succeeded.
      await refreshNuxtData('todos')
    },
  })
}
</script>

タイプ

署名
export function useNuxtData<DataT = any> (key: string): { data: Ref<DataT | undefined> }