Inertia.js в Laravel — альтернатива SPA без API: полный обзор стека Jetstream
Введение
Стек Inertia.js, предоставляемый Jetstream, использует Vue.js в качестве языка шаблонов. Создание приложения Inertia очень похоже на создание типичного приложения Vue. Однако вы будете использовать маршрутизатор Laravel вместо маршрутизатора Vue. Inertia - это небольшая библиотека, которая позволяет вам отображать однофайловые компоненты Vue из вашего бэкэнда Laravel, предоставляя имя компонента и данные, которые должны быть перенесены в «свойства» этого компонента.
Другими словами, этот стек дает вам всю мощь Vue.js без сложной маршрутизации на стороне клиента. Вы можете использовать стандартный маршрутизатор Laravel, к которому вы привыкли. Стек Inertia - отличный выбор, если вам комфортно и нравится использовать Vue.js в качестве языка шаблонов.
При использовании Inertia маршруты вашего приложения будут отображать "страницу" Inertia. Это очень похоже на возвращение представления Laravel Blade:
use Illuminate\Http\Request;
use Inertia\Inertia;
/**
* Показать экран общих настроек профиля.
*
* @param \Illuminate\Http\Request $request
* @return \Inertia\Response
*/
public function show(Request $request)
{
return Inertia::render('Profile/Show', [
'sessions' => $this->sessions($request)->all(),
]);
}При использовании стека Inertia Jetstream обладает некоторыми уникальными функциями, о которых вам следует знать. Мы обсудим каждую из этих функций ниже.
Документация Inertia
Перед использованием стека Inertia настоятельно рекомендуется ознакомиться со всей документацией по Inertia.
Компоненты
При создании стека Jetstream Inertia были реализованы различные компоненты Vue (кнопки, панели, входы, модальные окна), чтобы помочь в обеспечении согласованности и простоты использования пользовательского интерфейса. Вы можете использовать или не использовать эти компоненты. Все эти компоненты находятся в каталоге resources/js/Jetstream вашего приложения.
Вы можете получить представление о том, как использовать эти компоненты, просмотрев их использование на существующих страницах Jetstream, расположенных в вашем каталоге resources/js/Pages.
Настраиваемый рендеринг
Некоторые страницы Inertia Jetstream, такие как Teams/Show и Profile/Show, отображаются из самого Jetstream. Однако вам может потребоваться передать на эти страницы дополнительные данные при создании приложения. Следовательно, Jetstream позволяет настраивать данные / свойства, передаваемые на эти страницы, с помощью метода Jetstream::inertia()->whenRendering.
Этот метод принимает имя страницы, которую вы хотите настроить и замыкание (Closure). Замыкание получит входящий HTTP-запрос и массив данных по умолчанию, которые обычно отправляются на страницу. Вы можете при необходимости настроить или добавить новые элементы массива к этим данным. Как правило, этот метод следует вызывать из метода загрузки вашего JetstreamServiceProvider:
use Illuminate\Http\Request;
use Laravel\Jetstream\Jetstream;
Jetstream::inertia()->whenRendering(
'Profile/Show',
function (Request $request, array $data) {
return array_merge($data, [
// Пользовательские данные...
]);
}
);Формы / Хэлперы валидации
Для удобства работы с формами и ошибками валидации создан пакет NPM laravel-jetstream. Этот пакет устанавливается автоматически при использовании стека Jetstream Inertia.
Этот пакет добавляет новый метод form к объекту $inertia, к которому можно получить доступ через ваши компоненты Vue. Метод form используется для создания нового объекта формы, который обеспечит легкий доступ к сообщениям об ошибках, а также к таким удобствам, как сброс состояния формы при успешной отправке формы:
data() {
return {
form: this.$inertia.form({
name: this.name,
email: this.email,
}, {
bag: 'updateProfileInformation',
resetOnSuccess: true,
}),
}
}Форма может быть отправлена с использованием методов post, put или delete. Все данные, указанные при создании формы, будут автоматически включены в запрос. Кроме того, могут быть указаны параметры запроса Inertia:
this.form.post('/user/profile-information', {
preserveScroll: true
})Сообщения об ошибках формы можно получить с помощью метода form.error. Этот метод вернет первое доступное сообщение об ошибке для данного поля:
<jet-input-error :message="form.error('email')" class="mt-2" />Сводный список всех ошибок проверки можно получить с помощью метода errors. Этот метод может оказаться полезным при попытке отобразить сообщение об ошибке в виде простого списка:
<li v-for="error in form.errors()">
{{ error }}
</li>Дополнительная информация о текущем состоянии формы доступна через методы recentlySuccessful и processing. Эти методы полезны для определения завершённых или «выполняющихся» состояний пользовательского интерфейса:
<jet-action-message :on="form.recentlySuccessful" class="mr-3">
Сохранено.
</jet-action-message>
<jet-button :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
Сохранение
</jet-button>Чтобы узнать больше об использовании помощников форм Jetstream Inertia, вы можете просмотреть страницы Inertia, созданные во время установки Jetstream. Эти страницы находятся в каталоге resources/js/Pages вашего приложения.
Модули
Стек Inertia в Jetstream также включает два модальных компонента: DialogModal и ConfirmationModal. ConfirmationModal может использоваться при подтверждении деструктивных действий, таких как удаления, в то время как DialogModal является более общим модальным окном, которое можно использовать в любое время.
Чтобы проиллюстрировать использование модальных окон, рассмотрим следующее модальное окно, которое подтверждает, что пользователь желает удалить свою учетную запись:
<jet-confirmation-modal :show="confirmingUserDeletion" @close="confirmingUserDeletion = false">
<template #title>
Удалить аккаунт
</template>
<template #content>
Вы уверены, что хотите удалить свою учетную запись? После удаления вашей учетной записи все ее ресурсы и данные будут удалены без возможности восстановления.
</template>
<template #footer>
<jet-secondary-button @click.native="confirmingUserDeletion = false">
Отменить
</jet-secondary-button>
<jet-danger-button class="ml-2" @click.native="deleteTeam" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
Удалить аккаунт
</jet-danger-button>
</template>
</jet-confirmation-modal>Как видите, состояние открытия / закрытия модального окна определяется свойством show, объявленным в компоненте. Содержимое модального окна может быть определено путем всплывания трех слотов: title, content и footer.
Перевод:
https://jetstream.laravel.com/1.x/stacks/inertia.html
