Flash Data

Flash data cho phép gửi dữ liệu dùng một lần tới frontend và không xuất hiện lại khi người dùng điều hướng qua browser history. Khác regular prop, flash data không được lưu trong history state, vì vậy phù hợp cho success message, ID vừa tạo hoặc các giá trị tạm thời khác.

Flash dữ liệu

Bạn có thể flash dữ liệu bằng method Inertia::flash(), truyền key và value hoặc một array các cặp key-value.

public function store(Request $request)
{
    $user = User::create($request->validated());

    Inertia::flash('message', 'User created successfully!');

    // Or flash multiple values at once...
    Inertia::flash([
        'message' => 'User created!',
        'newUserId' => $user->id,
    ]);

    return back();
}

Cũng hỗ trợ chain với back().

return Inertia::flash('newUserId', $user->id)->back();

Bạn cũng có thể chain flash() vào render(), hoặc ngược lại.

return Inertia::render('Projects/Index', [
    'projects' => $projects,
])->flash('highlight', $project->id);

// Or...

return Inertia::flash('highlight', $project->id)
    ->render('Projects/Index', ['projects' => $projects]);

Flash data chỉ có phạm vi trong request hiện tại. Middleware tự động lưu nó vào session khi redirect. Sau khi flash data được gửi đến client, nó sẽ bị xóa và không xuất hiện trong các request tiếp theo.

Truy cập flash data

Flash data có sẵn trong page.flash. Bạn cũng có thể lắng nghe event toàn cục flash hoặc dùng callback onFlash.

<script setup>
import { usePage } from "@inertiajs/vue3";

const page = usePage();
</script>

<template>
  <div v-if="page.flash.toast" class="toast">
    {{ page.flash.toast.message }}
  </div>
</template>

import { usePage } from "@inertiajs/react";

export default function Layout({ children }) {
  const { flash } = usePage();

  return (
    <>
      {flash.toast && <div className="toast">{flash.toast.message}</div>}
      {children}
    </>
  );
}

<script>
    import { page } from '@inertiajs/svelte'
</script>

{#if page.flash.toast}
    <div class="toast">{page.flash.toast.message}</div>
{/if}

Callback onFlash

Bạn có thể dùng callback onFlash để xử lý flash data khi thực hiện request.

import { router } from "@inertiajs/vue3";

router.post("/users", data, {
  onFlash: ({ newUserId }) => {
    form.userId = newUserId;
  },
});

import { router } from "@inertiajs/react";

router.post("/users", data, {
  onFlash: ({ newUserId }) => {
    form.userId = newUserId;
  },
});

import { router } from "@inertiajs/svelte";

router.post("/users", data, {
  onFlash: ({ newUserId }) => {
    form.userId = newUserId;
  },
});

Event flash toàn cục

Bạn có thể dùng global event flash để xử lý flash data tại vị trí tập trung như layout component. Để biết thêm về event, xem tài liệu events.

import { router } from "@inertiajs/vue3";

router.on("flash", (event) => {
  if (event.detail.flash.toast) {
    showToast(event.detail.flash.toast);
  }
});

import { router } from "@inertiajs/react";

router.on("flash", (event) => {
  if (event.detail.flash.toast) {
    showToast(event.detail.flash.toast);
  }
});

import { router } from "@inertiajs/svelte";

router.on("flash", (event) => {
  if (event.detail.flash.toast) {
    showToast(event.detail.flash.toast);
  }
});

Event listener đăng ký bên trong component nên được cleanup khi component unmount để tránh tích lũy và bị kích hoạt nhiều lần. Điều này đặc biệt quan trọng với layout không persistent. Xem phần xóa event listener để biết thêm.

Event nguyên bản của trình duyệt cũng được hỗ trợ.

document.addEventListener("inertia:flash", (event) => {
  console.log(event.detail.flash);
});

document.addEventListener("inertia:flash", (event) => {
  console.log(event.detail.flash);
});

document.addEventListener("inertia:flash", (event) => {
  console.log(event.detail.flash);
});

Event flash không thể bị hủy và được phát trên mọi response có chứa flash data.

Flash phía client

Bạn có thể đặt flash data ở client mà không gửi request lên máy chủ bằng method router.flash(). Các value được merge với flash data hiện có.

import { router } from "@inertiajs/vue3";

router.flash("foo", "bar");
router.flash({ foo: "bar" });

import { router } from "@inertiajs/react";

router.flash("foo", "bar");
router.flash({ foo: "bar" });

import { router } from "@inertiajs/svelte";

router.flash("foo", "bar");
router.flash({ foo: "bar" });

Bạn cũng có thể truyền callback để truy cập flash data hiện tại hoặc thay thế hoàn toàn.

import { router } from "@inertiajs/vue3";

router.flash((current) => ({ ...current, bar: "baz" }));
router.flash(() => ({}));

import { router } from "@inertiajs/react";

router.flash((current) => ({ ...current, bar: "baz" }));
router.flash(() => ({}));

import { router } from "@inertiajs/svelte";

router.flash((current) => ({ ...current, bar: "baz" }));
router.flash(() => ({}));

TypeScript

Bạn có thể cấu hình type flash data trên toàn cục bằng declaration merging của TypeScript.

Kiểm thử

Để biết cách kiểm thử flash data, xem tài liệu testing.

Tài liệu chính thức

Bài dịch này được đối chiếu từ tài liệu Inertia.js v3 chính thức. Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.

Bắt đầu

Cài đặt

Khái niệm cốt lõi

Kiến thức cơ bản

Dữ liệu & Props

Bảo mật

Nâng cao

Flash dữ liệu

Truy cập flash data

Callback onFlash

Event flash toàn cục

Flash phía client

TypeScript

Kiểm thử

Tài liệu chính thức

​Flash dữ liệu

​Truy cập flash data

​Callback onFlash

​Event flash toàn cục

​Flash phía client

​TypeScript

​Kiểm thử

​Tài liệu chính thức

Flash dữ liệu

Truy cập flash data

Callback onFlash

Event flash toàn cục

Flash phía client

TypeScript

Kiểm thử

Tài liệu chính thức