Flash Data

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 để bắt đầu.

v2.3.3+ Đô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.

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

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 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 để 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 kiểu flash data 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 v2 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