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

<Warning>Bạn đang xem tài liệu Inertia.js v2. Inertia.js v3 đã được phát hành và hiện là phiên bản mặc định. Hãy xem [hướng dẫn nâng cấp](/v3/getting-started/upgrade-guide) để bắt đầu.</Warning>

<Badge>v2.3.3+</Badge>

Đôi khi bạn muốn gửi dữ liệu dùng một lần đến frontend và không muốn dữ liệu đó xuất hiện lại khi người dùng điều hướng qua history của trình duyệt. Khác với prop thông thường, flash data không được lưu trong history state, rất phù hợp cho message thành công, 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 event toàn cục `flash` để xử lý flash data tại một vị trí tập trung, chẳng hạn layout component. Để biết thêm về event, xem [tài liệu events](/v2/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 cần được cleanup khi component unmount để tránh tích lũy và bị gọi nhiều lần. Điều này đặc biệt quan trọng với layout không persistent. Xem [gỡ event listener](/v2/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 kiểu flash data toàn cục bằng [declaration merging của TypeScript](/v2/advanced/typescript#flash-data).

## Kiểm thử

Để biết cách kiểm thử flash data, xem [tài liệu testing](/v2/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 v2 chính thức](https://inertiajs.com/docs/v2/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.