Сохранение состояния в Inertia

Допустим, над списком постов есть черновик заметки в поле, а кнопка рядом лишь обновляет сами записи с сервера. После такого визита Inertia подставляет новый массив posts, и без особой настройки компонент может пересоздаться: набранный текст исчезает, хотя адрес и экран те же.

Опция preserveState говорит клиенту сохранить локальное состояние Vue при смене пропсов. Её передают вместе с методом get или reload у объекта router. Список обновится, а значение в ref останется на месте.

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

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

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

Давайте добавим поле черновика и кнопку обновления с сохранением состояния:

<script setup>
	import { ref } from 'vue'
	import { router } from '@inertiajs/vue3'

	defineProps({
		posts: Array,
	})

	const draft = ref('')

	function refreshPosts() {
		router.get('/posts', {}, {
			preserveState: true,
		})
	}
</script>

<template>
	<input v-model="draft" type="text" />
	<button type="button" @click="refreshPosts">
		Refresh posts
	</button>
	<ul>
		<li v-for="post in posts" :key="post">
			{{ post }}
		</li>
	</ul>
</template>

Сделайте страницу работников с полем заметки Lena и кнопкой обновления списка так, чтобы текст в поле не пропадал после ответа сервера.