События

Inertia предоставляет систему событий, которая позволяет Вам «подключаться» к различным событиям жизненного цикла библиотеки.

Регистрация слушателей

Чтобы зарегистрировать прослушиватель событий, используйте метод Inertia.on().

import { Inertia } from '@inertiajs/inertia'

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

Inertia использует собственные события браузера, так что Вы также можете работать с ними таким же образом. Просто не забудьте добавить inertia: к имени события.

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

Удаление слушателей

Когда Вы регистрируете прослушиватель событий, Inertia автоматически возвращает Вам обратный вызов для удаления прослушивателя событий.

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

// Удалить слушателя
removeStartEventListener()

В сочетании с обработанной ловушкой Вы можете автоматически удалить прослушиватель событий при переходе на другую страницу.

export default {
  mounted() {
    this.$once(
      'hook:destroyed',
      Inertia.on('start', (event) => {
        console.log(`Starting a visit to ${event.detail.visit.url}`)
      })
    )
  },
}

В качестве альтернативы, если Вы используете собственные события браузера, Вы можете удалить прослушиватель событий, используя removeEventListener().

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

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

// Удалить слушателя
document.removeEventListener('inertia:start', startEventListener)

Отмена событий

Некоторые события (before, invalid, error) поддерживают отмену, что позволяет предотвратить поведение Inertia по умолчанию. Как и в случае с собственными событиями, если только один прослушиватель событий вызывает event.preventDefault(), событие будет отменено.

import { Inertia } from '@inertiajs/inertia'

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

Для удобства, если Вы зарегистрируете свой слушатель событий с помощью Inertia.on(), Вы также можете отменить событие, вернув из слушателя false.

import { Inertia } from '@inertiajs/inertia'

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

Before

Событие before срабатывает, когда собирается запрос к серверу. Это полезно для перехвата посещений.

import { Inertia } from '@inertiajs/inertia'

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

Основная цель этого мероприятия - позволить Вам предотвратить посещение.

import { Inertia } from '@inertiajs/inertia'

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

Start

Событие start срабатывает при запуске запроса к серверу. Это полезно для отображения индикаторов загрузки.

import { Inertia } from '@inertiajs/inertia'

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

Событие start не отменяется.

Progress

Событие progress запускается по мере увеличения прогресса во время загрузки файлов.

import { Inertia } from '@inertiajs/inertia'

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

Событие progress не может быть отменено.

Success

Событие success запускается при успешном посещении страницы, если нет ошибок проверки. Обратите внимание, что это не исторические посещения.

import { Inertia } from '@inertiajs/inertia'

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

Событие success не может быть отменено.

Error

Событие error возникает, когда при "успешных" посещениях страницы присутствуют ошибки проверки.

import { Inertia } from '@inertiajs/inertia'

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

Событие error не отменяется.

Invalid

Событие invalid запускается, когда от сервера получен не-Inertia ответ, такой как html или json ответ. Допустимый ответ Inertia - это ответ, у которого заголовок X-Inertia установлен в значение true с полезной нагрузкой json, содержащей объект страницы.

Это событие запускается для всех типов ответов, включая коды ответов 200, 400 и 500.

import { Inertia } from '@inertiajs/inertia'

Inertia.on('invalid', (event) => {
  console.log(`Получен неверный ответ инерции.`)
  console.log(event.detail.response)
})

Отмените событие invalid, чтобы Inertia не отображала режим ответа, отличного от Inertia.

import { Inertia } from '@inertiajs/inertia'

Inertia.on('invalid', (event) => {
  event.preventDefault()
  // Самостоятельно обработайте неверный ответ
})

Exception

Событие exception запускается при непредвиденных ошибках XHR, таких как прерывания сети, и при ошибках, сгенерированных в обратном вызове resolveComponent().

import { Inertia } from '@inertiajs/inertia'

Inertia.on('exception', (event) => {
  console.log(`Непредвиденная ошибка во время посещения Inertia.`)
  console.log(event.detail.error)
})

Отмените событие exception, чтобы предотвратить возникновение ошибки.

import { Inertia } from '@inertiajs/inertia'

Inertia.on('exception', (event) => {
  event.preventDefault()
  // Устраните ошибку самостоятельно
})

Обратите внимание, что это событие не срабатывает для запросов XHR, которые получают ответы уровня 400 и 500, или для неинерционных ответов, поскольку эти ситуации обрабатываются другими способами с помощью Inertia. См. страницу обработка ошибок для получения дополнительной информации.

Finish

Событие finish запускается после завершения запроса XHR как для успешных, так и для неуспешных ответов. Это событие полезно для скрытия индикаторов загрузки.

import { Inertia } from '@inertiajs/inertia'

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

Событие finish не может быть отменено.

Navigate

Событие navigate запускается при успешных посещениях страницы, а также при навигации по истории. Это событие полезно для отслеживания аналитики и тому подобного.

import { Inertia } from '@inertiajs/inertia'

Inertia.on('navigate', (event) => {
  console.log(`Переход к ${event.detail.page.url}`)
})

Событие navigate не может быть отменено.

Обратные вызовы событий

В дополнение к глобальным событиям, Inertia также предоставляет ряд обратных вызовов событий при ручном выполнении посещений Inertia.