Nuxtjs：如何在应用匿名中间件中访问组件数据

Nuxt 全类型路由中间件（包括匿名中间件）的执行时机，早于页面组件的 setup、data、created 等所有组件初始化生命周期钩子，因此中间件运行时无法直接读取组件实例上还未完成赋值的 infos、similarPosts 这类业务属性数据

实际开发中常用的两种可行方案 #

1. 将业务数据获取逻辑前置到中间件层 #

如果 infos、similarPosts 这类数据本身来自接口请求，最合理的方式是把数据拉取逻辑从组件内挪到中间件中执行，通过共享状态容器做数据传递，从根源上规避时序问题：

• 中间件内提前完成目标数据的请求、字段校验，将结果写入 Pinia/Vuex、Nuxt 内置的 useState 这类全局可访问的共享存储
• 目标组件直接从共享存储中读取对应业务字段，不需要重复发起相同请求
• 示例代码（Nuxt3 匿名中间件写法）：

// 直接定义在页面组件内的匿名中间件
export default defineNuxtRouteMiddleware(async (to) => {
  // 提前请求组件需要的两类业务数据
  const { data: postInfos } = await useFetch(`/api/post/detail/${to.params.id}`)
  const { data: similarPosts } = await useFetch(`/api/post/similar/${to.params.id}`)
  // 同步到全局共享状态
  const postStore = usePostStore()
  postStore.infos = postInfos.value
  postStore.similarPosts = similarPosts.value
})

2. 数据必须在组件内部获取时的兼容方案 #

如果业务逻辑约束 infos、similarPosts 必须在组件内部完成初始化，就不要强行在路由中间件内读取这类数据：

• 保留组件内的数据获取逻辑，拿到数据后同步到全局共享状态
• 将原本要在中间件中执行的判断、跳转逻辑，挪到组件内的响应式 watch、生命周期钩子中触发，匹配组件数据的生成时机
• 示例代码：

<script setup>
const route = useRoute()
// 组件内获取业务数据
const { data: infos } = await useAsyncData('postInfos', () => $fetch(`/api/post/detail/${route.params.id}`))
const { data: similarPosts } = await useAsyncData('similarPosts', () => $fetch(`/api/post/similar/${route.params.id}`))

// 原中间件的逻辑在这里触发，匹配数据的生成时机
watch(similarPosts, (list) => {
  if (!list?.length) {
    // 执行原中间件的跳转、提示等逻辑
    return navigateTo('/empty-state')
  }
}, { immediate: true })
</script>

常见避坑点 #

• 不要尝试在中间件中通过组件实例引用、路由配置挂载的组件对象读取业务数据，中间件运行时组件尚未完成实例化，这类写法拿到的永远是 undefined
• 所有在中间件和组件间传递的业务数据，要兼容服务端/客户端的序列化要求，不要塞入函数、DOM 节点这类无法跨环境传输的内容
• Nuxt2 场景下的实现逻辑完全一致，对应把共享存储替换为 Vuex 实例、context.app 挂载的全局对象即可

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