将数据从 app.vue 发送到 Nuxt.js 3 中的页面答案

【问题标题】：Send Data From app.vue to Page in Nuxt.js 3将数据从 app.vue 发送到 Nuxt.js 3 中的页面
【发布时间】：2022-07-11 22:45:35
【问题描述】：

我正在制作一个注册页面，如果用户已登录，我需要将app.vue 文件中的用户对象发送到pages/ 目录中的每个页面。这是app.vue：

<script setup>

import { ref } from 'vue';

const userId = useCookie('user');

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

const user = ref(userObj);

</script>


<template>
    <div>
        <Header />
        <NuxtLayout>
            <NuxtPage :user="user.value" />
        </NuxtLayout>
    </div>
</template>

如何获取/pages/index.vue 中的用户或该目录中的任何文件？

【问题讨论】：

标签： vue.js nuxt.js nuxtjs3

【解决方案1】：

当我需要处理用户身份验证时，我通常喜欢使用@vueuse useLocalStorage，它基本上是反应式本地存储的包装器，因此用户在会话之间保持登录状态。您需要：

验证用户身份
将用户对象/响应保存在本地存储中（您的userObj）
随时随地访问它

例子：

// useUser composable
export const useUser = () => {
  const user = useLocalStorage("user", null); // by default is not logged in, so null or some other value you can check

  const login = async() => {
    const userObj = await ...;
    user.value = userObj; // here you set the user in the storage
  }

  return {
    user,
    login
  }
}

那么你需要在哪里对用户进行身份验证：

const { login } = useUser();

await login();

以及您需要访问用户对象的位置：

const { user } = useUser();

const someData = user.someValue;

用户对象将一直存在，直到您手动清空 localStorage，或者直到您创建一个清除存储密钥并注销用户的注销函数。

【讨论】：