如何从 Vue/Inertiajs 中的布局组件访问共享数据

Question

我已经使用inertiajs 官方网站上的这条指令来共享用户身份验证数据，它适用于所有页面，除了那些不直接由 Inertia::render() 方法呈现的页面。

我需要从名为 <Master> 的布局组件访问用户身份验证数据，但我不能！

这是我的结构/层次结构：

- Vue/
  - Pages/
    - Home/
      - Index.vue
    - Layouts/
      - Master.vue
      - Header.vue
      - Footer.vue
  - App.js

这是我的 <Master> 组件：

<template>
    <Head>
        <title>My Title</title>
    </Head>

    <Header :user="user"/>
    <slot/>
    <Footer/>
</template>

<script>
import Header from './Header';
import Footer from './Footer';
import {Head} from '@inertiajs/inertia-vue3';

export default {
    data() {
        return {
           user: this.auth.user,
        }
    },
    props:{
        auth: Object,
    },
    components: {
        Header,
        Footer,
        Head,
    }
}
</script>

Answer 1

您可以使用$page属性或usePage()挂钩。

<Header :user="$page.props.auth.user" />

const user = computed(() => usePage().props.value.auth.user)

如果您向下滚动您提供的链接，您就会知道。

如何从 Vue/Inertiajs 中的布局组件访问共享数据

问题描述

1 个解决方案

解决方案1
1 2022-12-11 06:12:10

如何从 Vue/Inertiajs 中的布局组件访问共享数据

问题描述

1 个解决方案

解决方案1 1 2022-12-11 06:12:10

解决方案1
1 2022-12-11 06:12:10