Nuxt3中如何复用跨页面共享的已获取数据？

针对你升级Nuxt3时遇到的组合式函数异步问题、静态生成数据等待问题，以及多页面共享数据的核心需求，给出以下具体解决方案：

一、修复useNavigation组合式函数的问题 #

你遇到的两个问题，本质是没有正确结合Nuxt3内置的异步数据获取工具。直接在组合式函数顶层写async/await会脱离Nuxt上下文，而静态生成不等待数据是因为没有利用Nuxt的预取机制。

正确的useNavigation写法应该基于useAsyncData（Nuxt专门处理异步数据的组合式函数，内置缓存和上下文绑定）：

// composables/useNavigation.js
export const useNavigation = () => {
  return useAsyncData('navigation', async () => {
    // 这里写你的接口请求逻辑
    const response = await $fetch('/api/navigation')
    return response.data
  }, {
    server: true, // 服务端/静态生成阶段优先获取数据
    lazy: false, // 静态生成时强制等待数据返回，确保页面包含数据
    getCachedData: (key) => useNuxtApp().payload.data[key] || null // 客户端复用服务端传递的缓存数据
  })
}

关键说明： #

• 避免async/await警告：useAsyncData的回调本身支持异步，且已经绑定了Nuxt实例上下文，不会触发“需访问Nuxt实例”的警告。
• 静态生成等待数据：lazy: false（默认值）会让静态生成过程等待数据请求完成，生成的HTML会直接包含导航内容，和直接用useFetch效果一致。

二、多页面共享数据的最优方案 #

1. 不要用Mixin #

Nuxt3和Vue3官方都不推荐使用Mixin，原因是Mixin容易引发命名冲突、逻辑不清晰，而组合式函数（Composables）是更灵活、更符合现代Vue生态的复用方案。

2. 利用Nuxt内置缓存实现一次请求复用 #

上面的useNavigation已经实现了自动缓存：

• 服务端/静态生成阶段：每个请求（或每个静态页面生成）只会请求一次接口，结果会被缓存到Nuxt的payload中。
• 客户端路由切换：直接复用payload中的数据，不会重复发起请求。
• 缓存过期控制：可以通过maxAge参数设置缓存有效期，比如maxAge: 3600000（1小时），到期后会自动重新请求。

3. 全局状态复用进阶（可选） #

如果需要让导航数据全局可用，无需每个组件都调用useNavigation，可以结合useState存储全局状态：

// composables/useNavigation.js
export const useNavigation = () => {
  const navigation = useState('navigation', () => null)

  // 仅在数据未初始化时发起请求
  if (!navigation.value) {
    useAsyncData('navigation', async () => {
      const data = await $fetch('/api/navigation')
      navigation.value = data
      return data
    })
  }

  return navigation
}

这样无论在哪个组件调用useNavigation()，都会直接返回已有的全局状态，确保整个应用生命周期内只请求一次接口。

三、使用示例 #

在任意组件或页面中直接调用即可：

<template>
  <nav>
    <ul v-for="item in navigationData" :key="item.id">
      <li>{{ item.title }}</li>
    </ul>
  </nav>
</template>

<script setup>
const { data: navigationData } = useNavigation()
</script>

内容的提问来源于stack exchange，提问作者Merc