Sự kiện

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.

Inertia cung cấp một hệ thống sự kiện cho phép bạn “hook” vào nhiều sự kiện khác nhau trong lifecycle của thư viện.

Đăng ký listener

Để đăng ký event listener, dùng phương thức router.on().

import { router } from '@inertiajs/vue3'

router.on('start', (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
})

import { router } from '@inertiajs/react'

router.on('start', (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
})

import { router } from '@inertiajs/svelte'

router.on('start', (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
})

Bên dưới, Inertia sử dụng event nguyên bản của trình duyệt nên bạn cũng có thể tương tác với sự kiện Inertia bằng các phương thức event thông thường mà bạn đã quen dùng — chỉ cần nhớ thêm tiền tố inertia: vào tên sự kiện.

import { router } from '@inertiajs/vue3'

document.addEventListener('inertia:start', (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
})

import { router } from '@inertiajs/react'

document.addEventListener('inertia:start', (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
})

import { router } from '@inertiajs/svelte'

document.addEventListener('inertia:start', (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
})

Gỡ listener

Khi bạn đăng ký event listener, Inertia tự động trả về một callback có thể gọi để gỡ listener đó.

import { router } from '@inertiajs/vue3'

let removeStartEventListener = router.on('start', (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
})

// Remove the listener...
removeStartEventListener()

import { router } from '@inertiajs/react'

let removeStartEventListener = router.on('start', (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
})

// Remove the listener...
removeStartEventListener()

import { router } from '@inertiajs/svelte'

let removeStartEventListener = router.on('start', (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
})

// Remove the listener...
removeStartEventListener()

Kết hợp với hook, bạn có thể tự động gỡ event listener khi component unmount.

import { router } from '@inertiajs/vue3'
import { onUnmounted } from 'vue'

onUnmounted(
    router.on('start', (event) => {
        console.log(`Starting a visit to ${event.detail.visit.url}`)
    })
)

import { useEffect } from 'react'
import { router } from '@inertiajs/react'

useEffect(() => {
    return router.on('start', (event) => {
        console.log(`Starting a visit to ${event.detail.visit.url}`)
    })
}, [])

import { router } from '@inertiajs/svelte'
import { onMount } from 'svelte'

onMount(() => {
    return router.on('start', (event) => {
        console.log(`Starting a visit to ${event.detail.visit.url}`)
    })
})

import { router } from '@inertiajs/svelte'

$effect(() => {
    return router.on('start', (event) => {
        console.log(`Starting a visit to ${event.detail.visit.url}`)
    })
})

Ngoài ra, nếu đang dùng event nguyên bản của trình duyệt, bạn có thể gỡ listener bằng removeEventListener().

import { router } from '@inertiajs/vue3'

let startEventListener = (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
}

document.addEventListener('inertia:start', startEventListener)

// Remove the listener...
document.removeEventListener('inertia:start', startEventListener)

import { router } from '@inertiajs/react'

let startEventListener = (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
}

document.addEventListener('inertia:start', startEventListener)

// Remove the listener...
document.removeEventListener('inertia:start', startEventListener)

import { router } from '@inertiajs/svelte'

let startEventListener = (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
}

document.addEventListener('inertia:start', startEventListener)

// Remove the listener...
document.removeEventListener('inertia:start', startEventListener)

Hủy sự kiện

Một số event như before, exception và invalid hỗ trợ hủy, cho phép bạn ngăn hành vi mặc định của Inertia. Tương tự event nguyên bản, event sẽ bị hủy nếu chỉ cần một event listener gọi event.preventDefault().

import { router } from '@inertiajs/vue3'

router.on('before', (event) => {
    if (!confirm('Are you sure you want to navigate away?')) {
        event.preventDefault()
    }
})

import { router } from '@inertiajs/react'

router.on('before', (event) => {
    if (!confirm('Are you sure you want to navigate away?')) {
        event.preventDefault()
    }
})

import { router } from '@inertiajs/svelte'

router.on('before', (event) => {
    if (!confirm('Are you sure you want to navigate away?')) {
        event.preventDefault()
    }
})

Để thuận tiện, nếu đăng ký event listener bằng router.on(), bạn có thể hủy event bằng cách trả về false từ listener.

import { router } from '@inertiajs/vue3'

router.on('before', (event) => {
    return confirm('Are you sure you want to navigate away?')
})

import { router } from '@inertiajs/react'

router.on('before', (event) => {
    return confirm('Are you sure you want to navigate away?')
})

import { router } from '@inertiajs/svelte'

router.on('before', (event) => {
    return confirm('Are you sure you want to navigate away?')
})

Lưu ý, trình duyệt không cho phép hủy event nguyên bản popstate, vì vậy không thể ngăn các lần điều hướng tiến và lùi trong lịch sử khi sử dụng Inertia.js.

Before

Sự kiện before được phát ngay trước khi một request chuẩn bị được gửi đến máy chủ. Điều này hữu ích để chặn visit.

import { router } from '@inertiajs/vue3'

router.on('before', (event) => {
    console.log(`About to make a visit to ${event.detail.visit.url}`)
})

import { router } from '@inertiajs/react'

router.on('before', (event) => {
    console.log(`About to make a visit to ${event.detail.visit.url}`)
})

import { router } from '@inertiajs/svelte'

router.on('before', (event) => {
    console.log(`About to make a visit to ${event.detail.visit.url}`)
})

Mục đích chính của sự kiện này là cho phép bạn ngăn một visit diễn ra.

import { router } from '@inertiajs/vue3'

router.on('before', (event) => {
    return confirm('Are you sure you want to navigate away?')
})

import { router } from '@inertiajs/react'

router.on('before', (event) => {
    return confirm('Are you sure you want to navigate away?')
})

import { router } from '@inertiajs/svelte'

router.on('before', (event) => {
    return confirm('Are you sure you want to navigate away?')
})

Start

Sự kiện start được phát khi request đến máy chủ đã bắt đầu. Sự kiện này hữu ích để hiển thị loading indicator.

import { router } from '@inertiajs/vue3'

router.on('start', (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
})

import { router } from '@inertiajs/react'

router.on('start', (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
})

import { router } from '@inertiajs/svelte'

router.on('start', (event) => {
    console.log(`Starting a visit to ${event.detail.visit.url}`)
})

Sự kiện start không thể bị hủy.

Progress

Sự kiện progress được phát khi tiến trình tăng lên trong quá trình tải file.

import { router } from '@inertiajs/vue3'

router.on('progress', (event) => {
    this.form.progress = event.detail.progress.percentage
})

import { router } from '@inertiajs/react'

router.on('progress', (event) => {
    this.form.progress = event.detail.progress.percentage
})

import { router } from '@inertiajs/svelte'

router.on('progress', (event) => {
    this.form.progress = event.detail.progress.percentage
})

Sự kiện progress không thể bị hủy.

Success

Sự kiện success được phát khi page visit thành công, trừ khi có lỗi validation. Tuy nhiên, điều này không bao gồm các visit trong lịch sử trình duyệt.

import { router } from '@inertiajs/vue3'

router.on('success', (event) => {
    console.log(`Successfully made a visit to ${event.detail.page.url}`)
})

import { router } from '@inertiajs/react'

router.on('success', (event) => {
    console.log(`Successfully made a visit to ${event.detail.page.url}`)
})

import { router } from '@inertiajs/svelte'

router.on('success', (event) => {
    console.log(`Successfully made a visit to ${event.detail.page.url}`)
})

Sự kiện success không thể bị hủy.

Flash

v2.3.3+ Event flash được kích hoạt khi flash data được nhận từ server. Điều này hữu ích để hiển thị toast hoặc xử lý dữ liệu tạm thời tại một vị trí tập trung.

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 flash không thể hủy. Partial reload chỉ kích hoạt event nếu flash data đã thay đổi.

Error

Sự kiện error được phát khi có lỗi validation trong các page visit “thành công”.

import { router } from '@inertiajs/vue3'

router.on('error', (event) => {
    console.log(event.detail.errors)
})

import { router } from '@inertiajs/react'

router.on('error', (event) => {
    console.log(event.detail.errors)
})

import { router } from '@inertiajs/svelte'

router.on('error', (event) => {
    console.log(event.detail.errors)
})

Sự kiện error không thể bị hủy.

Invalid

Event invalid được kích hoạt khi nhận response không phải Inertia từ server, chẳng hạn HTML hoặc JSON thông thường. Response Inertia hợp lệ phải có header X-Inertia đặt thành true, cùng payload json chứa page object. Sự kiện này được phát với mọi loại response, bao gồm các mã response 200, 400 và 500.

import { router } from '@inertiajs/vue3'

router.on('invalid', (event) => {
    console.log(`An invalid Inertia response was received.`)
    console.log(event.detail.response)
})

import { router } from '@inertiajs/react'

router.on('invalid', (event) => {
    console.log(`An invalid Inertia response was received.`)
    console.log(event.detail.response)
})

import { router } from '@inertiajs/svelte'

router.on('invalid', (event) => {
    console.log(`An invalid Inertia response was received.`)
    console.log(event.detail.response)
})

Bạn có thể hủy sự kiện invalid để ngăn Inertia hiển thị modal chứa response không phải Inertia.

import { router } from '@inertiajs/vue3'

router.on('invalid', (event) => {
    event.preventDefault()

    // Handle the invalid response yourself...
})

import { router } from '@inertiajs/react'

router.on('invalid', (event) => {
    event.preventDefault()

    // Handle the invalid response yourself...
})

import { router } from '@inertiajs/svelte'

router.on('invalid', (event) => {
    event.preventDefault()

    // Handle the invalid response yourself...
})

Exception

Sự kiện exception được phát khi xảy ra lỗi XHR ngoài dự kiến như gián đoạn mạng. Ngoài ra, sự kiện này cũng được phát với các lỗi xảy ra trong quá trình resolve page component.

import { router } from '@inertiajs/vue3'

router.on('exception', (event) => {
    console.log(`An unexpected error occurred during an Inertia visit.`)
    console.log(event.detail.error)
})

import { router } from '@inertiajs/react'

router.on('exception', (event) => {
    console.log(`An unexpected error occurred during an Inertia visit.`)
    console.log(event.detail.error)
})

import { router } from '@inertiajs/svelte'

router.on('exception', (event) => {
    console.log(`An unexpected error occurred during an Inertia visit.`)
    console.log(event.detail.error)
})

Bạn có thể hủy sự kiện exception để ngăn lỗi bị ném ra.

import { router } from '@inertiajs/vue3'

router.on('exception', (event) => {
    event.preventDefault()
    // Handle the error yourself
})

import { router } from '@inertiajs/react'

router.on('exception', (event) => {
    event.preventDefault()
    // Handle the error yourself
})

import { router } from '@inertiajs/svelte'

router.on('exception', (event) => {
    event.preventDefault()
    // Handle the error yourself
})

Event này không được kích hoạt với XHR request nhận response mức 400 hoặc 500, cũng như với response không phải Inertia, vì các tình huống này được Inertia xử lý theo cách khác. Xem tài liệu xử lý lỗi để biết thêm thông tin.

Finish

Sự kiện finish được phát sau khi một request XHR hoàn tất, áp dụng cho cả response “thành công” lẫn “không thành công”. Sự kiện này hữu ích để ẩn loading indicator.

import { router } from '@inertiajs/vue3'

router.on('finish', (event) => {
    NProgress.done()
})

import { router } from '@inertiajs/react'

router.on('finish', (event) => {
    NProgress.done()
})

import { router } from '@inertiajs/svelte'

router.on('finish', (event) => {
    NProgress.done()
})

Sự kiện finish không thể bị hủy.

Navigate

Sự kiện navigate được phát khi page visit thành công, cũng như khi điều hướng qua lịch sử trình duyệt.

import { router } from '@inertiajs/vue3'

router.on('navigate', (event) => {
    console.log(`Navigated to ${event.detail.page.url}`)
})

import { router } from '@inertiajs/react'

router.on('navigate', (event) => {
    console.log(`Navigated to ${event.detail.page.url}`)
})

import { router } from '@inertiajs/svelte'

router.on('navigate', (event) => {
    console.log(`Navigated to ${event.detail.page.url}`)
})

Sự kiện navigate không thể bị hủy.

Prefetch

Event prefetching được kích hoạt khi router bắt đầu prefetch một trang.

import { router } from '@inertiajs/vue3'

router.on('prefetching', (event) => {
    console.log(`Prefetching ${event.detail.visit.url}`)
})

import { router } from '@inertiajs/react'

router.on('prefetching', (event) => {
    console.log(`Prefetching ${event.detail.visit.url}`)
})

import { router } from '@inertiajs/svelte'

router.on('prefetching', (event) => {
    console.log(`Prefetching ${event.detail.visit.url}`)
})

Event prefetching không thể hủy.

Prefetched

Event prefetched được kích hoạt khi router đã prefetch một trang thành công.

import { router } from '@inertiajs/vue3'

router.on('prefetched', (event) => {
    console.log(`Prefetched ${event.detail.visit.url}`)
})

import { router } from '@inertiajs/react'

router.on('prefetched', (event) => {
    console.log(`Prefetched ${event.detail.visit.url}`)
})

import { router } from '@inertiajs/svelte'

router.on('prefetched', (event) => {
    console.log(`Prefetched ${event.detail.visit.url}`)
})

Event prefetched không thể hủy.

Callback sự kiện

Ngoài các event toàn cục được mô tả trong trang này, Inertia còn cung cấp một số event callback được kích hoạt khi bạn thực hiện Inertia visit thủ công.

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

Đăng ký listener

Gỡ listener

Hủy sự kiện

Before

Start

Progress

Success

Flash

Error

Invalid

Exception

Finish

Navigate

Prefetch

Prefetched

Callback sự kiện

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

​Đăng ký listener

​Gỡ listener

​Hủy sự kiện

​Before

​Start

​Progress

​Success

​Flash

​Error

​Invalid

​Exception

​Finish

​Navigate

​Prefetch

​Prefetched

​Callback sự kiện

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

Đăng ký listener

Gỡ listener

Hủy sự kiện

Before

Start

Progress

Success

Flash

Error

Invalid

Exception

Finish

Navigate

Prefetch

Prefetched

Callback sự kiện

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