v3.16
Nuxt on GitHub

useNuxtData

源码
访问数据获取组合式函数当前的缓存值。
useNuxtData 允许你访问 useAsyncData、useLazyAsyncData、useFetch 和 useLazyFetch 的当前缓存值（需要显式提供 key）。

使用方式

useNuxtData 是一个组合式函数，用于访问如 useAsyncData、useLazyAsyncData、useFetch 和 useLazyFetch 这些数据获取函数的当前缓存值。只需提供数据获取时使用的 key，即可检索缓存数据并按需使用。

这在优化性能（如复用已获取的数据）或实现乐观更新、级联数据更新等功能时非常有用。

使用 useNuxtData 前，请确保对应的数据获取函数（如 useFetch、useAsyncData 等）已经使用显式的 key 调用过。

参数

  • key：用于标识缓存数据的唯一 key。该 key 应与原始数据获取时使用的 key 保持一致。

返回值

  • data：一个响应式引用，指向与提供的 key 关联的缓存数据。如果没有缓存数据，则值为 null。当缓存数据发生变化时，该 Ref 会自动更新，支持组件内的无缝响应式行为。

示例

以下示例展示了如何在从服务器获取最新数据时，使用缓存数据作为占位符。

pages/posts.vue
<script setup lang="ts">
// 使用 'posts' 作为 key，稍后可以通过该 key 访问相同的数据
const { data } = await useFetch('/api/posts', { key: 'posts' })
</script>
pages/posts/[id].vue
<script setup lang="ts">
// 访问父路由 posts.vue 中 useFetch 的缓存值
const { data: posts } = useNuxtData('posts')

const route = useRoute()

const { data } = useLazyFetch(`/api/posts/${route.params.id}`, {
  key: `post-${route.params.id}`,
  default() {
    // 从缓存中查找指定的文章，并将其设置为默认值
    return posts.value.find(post => post.id === route.params.id)
  }
})
</script>

乐观更新

以下示例展示了如何通过 useNuxtData 实现乐观更新（Optimistic Updates）。

乐观更新是一种用户界面交互技术，即在假设服务器操作成功的前提下立即更新 UI。如果操作失败，则回滚到之前的状态。

pages/todos.vue
<script setup lang="ts">
// 使用 'todos' 作为 key，稍后可以访问相同数据
const { data } = await useAsyncData('todos', () => $fetch('/api/todos'))
</script>
components/NewTodo.vue
<script setup lang="ts">
const newTodo = ref('')
let previousTodos = []

// 访问 todos.vue 中 useAsyncData 的缓存值
const { data: todos } = useNuxtData('todos')

async function addTodo () {
  return $fetch('/api/addTodo', {
    method: 'post',
    body: {
      todo: newTodo.value
    },
    onRequest () {
      // 保存先前的缓存值，以便请求失败时恢复
      previousTodos = todos.value

      // 乐观地更新 todos 列表
      todos.value = [...todos.value, newTodo.value]
    },
    onResponseError () {
      // 如果请求失败，则回滚数据
      todos.value = previousTodos
    },
    async onResponse () {
      // 如果请求成功，在后台刷新 todos 数据
      await refreshNuxtData('todos')
    }
  })
}
</script>

类型定义

useNuxtData<DataT = any> (key: string): { data: Ref<DataT | null> }