Ленивое вычисление в Inertia

Давайте изучим ленивое вычисление пропса. Это способ отложить получение значения до сборки ответа. Вместо готового значения в массив для render можно положить замыкание - функцию без аргументов, которая вернёт данные позже. Inertia вызовет её не при описании маршрута, а когда будет собирать ответ для клиента.

Если пропс не попал в этот ответ, замыкание не выполняется. Так откладывают тяжёлые запросы и лишние вычисления, пока компоненту они действительно не понадобятся. Снаружи для Vue всё выглядит как обычный пропс: имя в defineProps и значение в шаблоне.

Давайте отдадим заголовок и пояснение двумя замыканиями:

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

	Route::get('/posts/{post}', function (int $post) {
		return Inertia::render('Posts/Show', [
			'title' => fn () => 'News #' . $post,
			'note' => fn () => 'Loaded for post ' . $post,
		]);
	});
?>

Давайте объявим оба пропса в компоненте и выведем их:

<script setup>
	defineProps({
		title: String,
		note: String,
	})
</script>

<template>
	<h1>{{ title }}</h1>
	<p>{{ note }}</p>
</template>

Сделайте страницу работника Oleg, где должность и текст о нём приходят с сервера и видны на экране.