> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs-vi.tuantq.online/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```php theme={null}
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()`.

```php theme={null}
return Inertia::flash('newUserId', $user->id)->back();
```

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

```php theme={null}
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`.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <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>
  ```

  ```jsx React icon="react" theme={null}
  import { usePage } from "@inertiajs/react";

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

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

  ```svelte Svelte icon="s" theme={null}
  <script>
      import { page } from '@inertiajs/svelte'
  </script>

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

## Callback onFlash

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

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from "@inertiajs/vue3";

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

  ```js React icon="react" theme={null}
  import { router } from "@inertiajs/react";

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

  ```js Svelte icon="s" theme={null}
  import { router } from "@inertiajs/svelte";

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

## 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](/v3/advanced/events).

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from "@inertiajs/vue3";

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

  ```js React icon="react" theme={null}
  import { router } from "@inertiajs/react";

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

  ```js Svelte icon="s" theme={null}
  import { router } from "@inertiajs/svelte";

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

<Warning>
  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](/v3/advanced/events#removing-listeners) để biết thêm.
</Warning>

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

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  document.addEventListener("inertia:flash", (event) => {
    console.log(event.detail.flash);
  });
  ```

  ```js React icon="react" theme={null}
  document.addEventListener("inertia:flash", (event) => {
    console.log(event.detail.flash);
  });
  ```

  ```js Svelte icon="s" theme={null}
  document.addEventListener("inertia:flash", (event) => {
    console.log(event.detail.flash);
  });
  ```
</CodeGroup>

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ó.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from "@inertiajs/vue3";

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

  ```js React icon="react" theme={null}
  import { router } from "@inertiajs/react";

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

  ```js Svelte icon="s" theme={null}
  import { router } from "@inertiajs/svelte";

  router.flash("foo", "bar");
  router.flash({ foo: "bar" });
  ```
</CodeGroup>

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.

<CodeGroup>
  ```js Vue icon="vuejs" theme={null}
  import { router } from "@inertiajs/vue3";

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

  ```js React icon="react" theme={null}
  import { router } from "@inertiajs/react";

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

  ```js Svelte icon="s" theme={null}
  import { router } from "@inertiajs/svelte";

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

## 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](/v3/advanced/typescript#flash-data).

## Kiểm thử

Để biết cách kiểm thử flash data, xem [tài liệu testing](/v3/advanced/testing#testing-flash-data).

***

## 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](https://inertiajs.com/docs/v3/data-props/flash-data). 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.