惯性 ​

简介 ​

Jetstream 提供的 Inertia 堆栈使用 Vue.js 作为其模板语言。构建 Inertia 应用程序与构建典型的 Vue 应用程序非常相似；但是，你将使用 Laravel 的路由器，而不是 Vue 路由器。Inertia 是一个小型库，它允许你通过提供组件的名称和应该注入到该组件的“props”中的数据，从 Laravel 后端渲染单文件 Vue 组件。

换句话说，此堆栈为你提供了 Vue.js 的全部功能，而没有客户端路由的复杂性。如果你习惯并喜欢使用 Vue.js 作为模板语言，那么 Inertia 堆栈是一个不错的选择。使用 Inertia 时，应用程序的路由将通过渲染 Inertia “页面”来响应。这看起来与返回 Laravel Blade 视图非常相似

use Illuminate\Http\Request;
use Inertia\Inertia;
use Inertia\Response;

/**
 * Show the general profile settings screen.
 */
public function show(Request $request): Response
{
    return Inertia::render('Profile/Show', [
        'sessions' => $this->sessions($request)->all(),
    ]);
}

使用 Inertia 堆栈时，Jetstream 有一些你应该注意的独特功能。我们将在下面讨论这些功能中的每一个。

组件 ​

当我们创建 Jetstream Inertia 堆栈时，创建了各种 Vue 组件（按钮、面板、输入、模态框），以帮助创建 UI 一致性和易用性。你可以自由使用或不使用这些组件。所有这些组件都位于应用程序的 resources/js/Components 目录中。

你可以通过查看它们在 Jetstream 现有页面中的用法来深入了解如何使用这些组件，这些页面位于应用程序的 resources/js/Pages 目录中。

自定义 Jetstream 的页面渲染 ​

Jetstream 的一些 Inertia 页面（例如 Teams/Show 和 Profile/Show）是从 Jetstream 本身内部渲染的。但是，在构建应用程序时，你可能需要将其他数据传递到这些页面。因此，Jetstream 允许你使用 Jetstream::inertia()->whenRendering 方法自定义传递到这些页面的数据/props。

此方法接受你希望自定义的页面的名称和一个闭包。该闭包将接收传入的 HTTP 请求和通常发送到该页面的默认数据数组。你可以根据需要自定义或向数据中添加新的数组元素。通常，你应该在 App\Providers\JetstreamServiceProvider 类的 boot 方法中调用此方法

use Illuminate\Http\Request;
use Laravel\Jetstream\Jetstream;

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    // ...

    Jetstream::inertia()->whenRendering(
        'Profile/Show',
        function (Request $request, array $data) {
            return array_merge($data, [
                // Custom data...
            ]);
        }
    );
}

模态框 ​

Jetstream 的 Inertia 堆栈还包括两个模态组件：DialogModal 和 ConfirmationModal。ConfirmationModal 可用于确认破坏性操作（例如删除资源），而 DialogModal 是一个更通用的模态窗口，可随时使用。

为了说明模态的使用，请考虑以下模态，它确认用户想要删除其帐户

<ConfirmationModal :show="confirmingUserDeletion" @close="confirmingUserDeletion = false">
    <template #title>
        Delete Account
    </template>

    <template #content>
        Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted.
    </template>

    <template #footer>
        <SecondaryButton @click.native="confirmingUserDeletion = false">
            Nevermind
        </SecondaryButton>

        <DangerButton class="ml-2" @click.native="deleteUser" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
            Delete Account
        </DangerButton>
    </template>
</ConfirmationModal>

如你所见，模态的打开/关闭状态由组件上声明的 show 属性决定。可以通过填充三个插槽来指定模态的内容：title、content 和 footer。

路由 ​

Jetstream 的 Inertia 堆栈包括 Tighten 的 Ziggy 库，作为 Laravel route() 帮助器的 JavaScript 替代品。你可以参阅 Ziggy 使用文档 以获取有关使用此库的完整指南，但可以在 Jetstream 自身的 Vue 文件中找到一些常见示例，包括 Layouts/AppLayout.vue

<NavLink :href="route('dashboard')" :active="route().current('dashboard')">
    Dashboard
</NavLink>