Nuxt.js 3中如何将app.vue用户数据传递到pages目录页面

你有两种可选的实现方式，其中第二种更适配你需要给全量页面传递用户数据的场景：

方式一：接收NuxtPage透传的Props #

你当前在app.vue中给<NuxtPage>绑定的user参数，可以直接在页面组件中通过defineProps声明接收，以pages/index.vue为例：

<script setup>
const props = defineProps({
  user: {
    type: Object,
    default: null
  }
})

// 直接通过props.user访问传递的用户数据
</script>

注意：该方式存在明显缺陷。如果项目中存在嵌套路由，子路由页面由父页面内的<NuxtPage>组件渲染，无法接收到你在根级app.vue传递的prop，需要在每一层嵌套的<NuxtPage>上重复绑定user参数，维护成本极高，不适合全局共享类数据的传递。

方式二：使用Nuxt全局状态共享用户数据（推荐） #

用户信息属于全应用通用的全局状态，不需要通过组件prop逐层透传，直接使用Nuxt内置的useState实现全局状态共享即可，该方案天然支持SSR、响应式，所有页面、组件都可以直接访问，不存在嵌套路由丢参数的问题。

第一步：调整app.vue代码 #

将原本存在本地ref中的用户数据存入全局状态：

<script setup>
const userId = useCookie('user')

const userObj = await $fetch('/api/user/getLoggedInUser', {
    method: 'post',
    body: {
        id: userId.value
    }
})

// 定义全局状态，指定唯一key为loggedInUser，全应用可通过该key访问该状态
const user = useState('loggedInUser', () => userObj)
</script>


<template>
    <div>
        <Header />
        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>
    </div>
</template>

第二步：任意页面读取用户数据 #

所有pages/目录下的页面、项目内任意组件，不需要额外传参，直接通过相同key调用useState即可拿到响应式的用户数据：

<script setup>
// 获取全局存储的登录用户数据
const user = useState('loggedInUser')

// 直接通过user.value访问即可，状态全局同步，后续修改用户值时所有引用位置会自动更新
</script>

如果后续需要实现登录、退出登录功能，只需要在对应逻辑中修改useState('loggedInUser').value的值，即可同步更新全应用的用户状态，不需要额外做事件通信。

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