useNuxtData

访问数据获取组合式函数的当前缓存值。

useNuxtData 让你访问 useAsyncData、useLazyAsyncData、useFetch 以及 useLazyFetch 在显式提供 key 时的当前缓存值。 :

用法

useNuxtData 组合式函数用于访问数据获取组合式函数（如 useAsyncData、useLazyAsyncData、useFetch 和 useLazyFetch）的当前缓存值。通过提供数据获取时使用的 key，你可以取回缓存的数据并按需使用。

这对于通过复用已获取的数据来优化性能，或实现诸如乐观更新（Optimistic Updates）或级联数据更新等功能特别有用。

要使用 useNuxtData，请确保数据获取组合式函数（useFetch、useAsyncData 等）在调用时传入了显式提供的 key。

类型

Signature

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

参数

key：标识缓存数据的唯一 key。该 key 应与原始数据获取时使用的 key 匹配。

返回值

data：与所提供 key 相关联的缓存数据的响应式引用。如果不存在缓存数据，该值为 undefined。当缓存数据发生变化时，该 Ref 会自动更新，让你的组件实现无缝响应式。

示例

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

app/pages/posts.vue

<script setup lang="ts">
// 我们之后可以使用 'posts' key 来访问相同的数据
const { data } = await useFetch('/api/posts', { key: 'posts' })
</script>

app/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 () {
    // 从缓存中找出对应的单独的 post，并将其设为默认值。
    return posts.value.find(post => post.id === route.params.id)
  },
})
</script>

乐观更新

下面的示例展示了如何使用 useNuxtData 实现乐观更新。

乐观更新是一种技术：立即更新用户界面，假设服务器操作会成功。如果该操作最终失败，则会将 UI 回滚到之前的状态。

app/pages/todos.vue

<script setup lang="ts">
// 我们之后可以使用 'todos' key 来访问相同的数据
const { data } = await useAsyncData('todos', (_nuxtApp, { signal }) => $fetch('/api/todos', { signal }))
</script>

app/components/NewTodo.vue

<script setup lang="ts">
const newTodo = ref('')
let previousTodos = []

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

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

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