イベント

Inertiaは、ライブラリのさまざまなライフサイクルイベントに「フック」できるイベントシステムを提供します。

リスナーの登録

イベントリスナーを登録するには、`router.on()`メソッドを使用します。

import { router } from '@inertiajs/vue3'

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

Inertiaは内部でネイティブブラウザイベントを使用しているため、既に使い慣れている一般的なイベントメソッドを使用してInertiaイベントを操作することもできます。イベント名の前に`inertia:`を追加する必要があることに注意してください。

import { router } from '@inertiajs/vue3'

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

リスナーの削除

イベントリスナーを登録すると、Inertiaはイベントリスナーを削除するために呼び出すことができるコールバックを自動的に返します。

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/vue3'
import { onUnmounted } from 'vue'

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

または、ネイティブブラウザイベントを使用している場合は、`removeEventListener()`を使用してイベントリスナーを削除できます。 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)

イベントのキャンセル

`before`、`invalid`、`error`など、一部のイベントはキャンセルをサポートしており、Inertiaのデフォルトの動作を防ぐことができます。ネイティブイベントと同様に、1つのイベントリスナーのみが`event.preventDefault()`を呼び出した場合、イベントはキャンセルされます。

import { router } from '@inertiajs/vue3'

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

`router.on()`を使用してイベントリスナーを登録する場合、リスナーから`false`を返すことでイベントをキャンセルできます。

import { router } from '@inertiajs/vue3'

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

ブラウザはネイティブの`popstate`イベントのキャンセルを許可していないため、Inertia.jsを使用している間は、履歴の進む操作と戻る操作を防ぐことはできません。

Before

`before`イベントは、サーバーにリクエストが送信されようとしているときに発生します。これは、訪問をインターセプトするのに役立ちます。

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/vue3'

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

Start

`start`イベントは、サーバーへのリクエストが開始されたときに発生します。これは、ローディングインジケーターを表示するのに役立ちます。

import { router } from '@inertiajs/vue3'

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

`start`イベントはキャンセルできません。

Progress

`progress`イベントは、ファイルのアップロード中に進捗状況が増加するにつれて発生します。

import { router } from '@inertiajs/vue3'

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

`progress`イベントはキャンセルできません。

Success

`success`イベントは、バリデーションエラーがない限り、ページの訪問が成功したときに発生します。ただし、履歴の訪問は含まれません。

import { router } from '@inertiajs/vue3'

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

`success`イベントはキャンセルできません。

Error

`error`イベントは、「成功した」ページ訪問にバリデーションエラーが存在する場合に発生します。 

import { router } from '@inertiajs/vue3'

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

`error`イベントはキャンセルできません。

Invalid

`invalid`イベントは、サーバーからHTMLや通常のJSONレスポンスなど、Inertia以外のレスポンスを受信したときに発生します。有効なInertiaレスポンスは、`X-Inertia`ヘッダーが`true`に設定され、`json`ペイロードにページオブジェクトが含まれているレスポンスです。 `true`で、`json`ペイロードに ページオブジェクトが含まれています。.

このイベントは、`200`、`400`、`500`などのすべてのレスポンスタイプで発生します。レスポンスコード。

import { router } from '@inertiajs/vue3'

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

InertiaがInertia以外のレスポンスモーダルを表示しないようにするために、`invalid`イベントをキャンセルできます。

import { router } from '@inertiajs/vue3'

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

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

Exception

`exception`イベントは、ネットワークの切断などの予期しないXHRエラーで発生します。さらに、このイベントは、ページコンポーネントの解決時に発生したエラーに対して発生します。

import { router } from '@inertiajs/vue3'

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

エラーがスローされないようにするために、`exception`イベントをキャンセルできます。

import { router } from '@inertiajs/vue3'

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

このイベントは、`400`および`500`レベルのレスポンスを受信するXHRリクエスト、またはInertia以外のレスポンスに対しては発生*しません*。これらの状況は、Inertiaによって他の方法で処理されます。詳細については、エラー処理に関するドキュメントを参照してください。

Finish

`finish`イベントは、「成功した」レスポンスと「失敗した」レスポンスの両方でXHRリクエストが完了した後に発生します。このイベントは、ローディングインジケーターを非表示にするのに役立ちます。

import { router } from '@inertiajs/vue3'

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

`finish`イベントはキャンセルできません。

Navigate

`navigate`イベントは、ページの訪問が成功したとき、および履歴を移動したときに発生します。

import { router } from '@inertiajs/vue3'

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

`navigate`イベントはキャンセルできません。

イベントコールバック

このページで説明されているグローバルイベントに加えて、Inertiaは多くの イベントコールバックを提供しており、これらはInertiaの訪問を手動で行うときに発生します。