Событие flash в Inertia

Представим, что после создания поста Laravel кладёт короткое flash-сообщение и делает редирект на список. В основном учебнике такую надпись выводили в шаблоне страницы из page.flash. Тот же ответ можно поймать событием flash в корневом макете и показать уведомление, не копируя разметку на каждый экран.

Событие flash вызывается на каждом ответе, где сервер передал flash-данные. В деталях события лежит объект с ключами, которые Laravel положил методом flash у Inertia. Отменить событие нельзя, оно только сообщает клиенту, что пришло одноразовое сообщение.

Давайте сохраним пост и положим flash-сообщение перед редиректом:

<?php
	use Illuminate\Http\Request;
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts', function () {
		return Inertia::render('Posts/Index', [
			'title' => 'Posts',
		]);
	});

	Route::get('/posts/create', function () {
		return Inertia::render('Posts/Create');
	});

	Route::post('/posts', function (Request $request) {
		Inertia::flash('toast', [
			'message' => 'Post saved.',
		]);

		return redirect('/posts');
	});
?>

Давайте заведём общий текст уведомления и подпишемся на flash при старте клиента:

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

export const toastText = ref('')

router.on('flash', (event) => {
	const toast = event.detail.flash.toast

	if (toast?.message) {
		toastText.value = toast.message
	}
})

Давайте выведем форму и блок уведомления из общего ref:

<script setup>
	import { Form } from '@inertiajs/vue3'
	import { toastText } from '../../app.js'
</script>

<template>
	<h1>New post</h1>
	<p v-if="toastText">
		{{ toastText }}
	</p>
	<Form action="/posts" method="post">
		<input type="text" name="title" />
		<button type="submit">Save</button>
	</Form>
</template>

Сделайте добавление работника Kira так, чтобы flash-сообщение с сервера появлялось в одном общем блоке уведомления на странице списка.