共享数据 Shared data

未匹配的标注

有时您需要访问应用程序中众多页面上的某些数据。例如,一个常见的用例是在站点标题中显示当前用户。在每个响应中手动传递这些数据是不切实际的。在这些情况下,共享数据可能很有用。

共享数据

服务器端适配器提供了一种为每个请求预先分配共享数据的方法。这通常在您的控制器之外完成。共享数据将自动与控制器中提供的页面道具合并。

Laravel

/*
|----------------------------------------------------------------
| Via the HandleInertiaRequests middleware (recommended)
|----------------------------------------------------------------
*/

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [

            // Synchronously
            'appName' => config('app.name'),

            // Lazily
            'auth.user' => fn () => $request->user()
                ? $request->user()->only('id', 'name', 'email')
                : null,
        ]);
    }
}

/*
|----------------------------------------------------------------
| Manually
|----------------------------------------------------------------
*/

use Inertia\Inertia;

// Synchronously
Inertia::share('appName', config('app.name'));

// Lazily
Inertia::share('user', fn (Request $request) => $request->user()
    ? $request->user()->only('id', 'name', 'email')
    : null
);

:heavy_exclamation_mark:The 中间件提供了一个「共享」方法,您可以在其中定义与每个惯性响应自动共享的数据。

谨慎使用此功能,因为每个响应都包含共享数据。

页面道具和共享数据合并在一起,因此请务必适当地命名您的共享数据。

访问共享数据

一旦你在服务器端共享了数据,你就可以在你的页面组件中作为 props 访问它。共享数据甚至可以在非页面组件中访问,尽管在这些情况下不能作为道具。这是一个如何在布局组件中执行此操作的示例。

Vue 3

<template>
  <main>
    <header>
      You are logged in as: {{ user.name }}
    </header>
    <content>
      <slot />
    </content>
  </main>
</template>

<script>
import { computed } from 'vue'
import { usePage } from '@inertiajs/inertia-vue3'

export default {
  setup() {
    const user = computed(() => usePage().props.value.auth.user)
    return { user }
  },
}
</script>

使用 $page 属性或 usePage() 钩子访问共享数据。

闪现消息

共享数据的另一个很好的用例是闪存消息。这些是存储在会话中的消息,仅用于下一个请求。您通常会在完成一项任务后并在重定向到不同页面之前设置一条 Flash 消息。

这是在 Inertia 应用程序中实现 Flash 消息的简单方法。首先,在每个请求上共享 flash 消息。

Laravel

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'flash' => [
                'message' => fn () => $request->session()->get('message')
            ],
        ]);
    }
}

接下来,在前端组件中显示 Flash 消息,例如站点布局。

Vue 2 / Vue 3

<template>
  <main>
    <header></header>
    <content>
      <div v-if="$page.props.flash.message" class="alert">
        {{ $page.props.flash.message }}
      </div>
      <slot />
    </content>
    <footer></footer>
  </main>
</template>

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/inertia/0.11/sh...

译文地址:https://learnku.com/docs/inertia/0.11/sh...

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
贡献者:1
讨论数量: 0
发起讨论 只看当前版本


暂无话题~