Снятие слушателя в Inertia

Бывает, что временная панель настроек вешает свой слушатель start, пока она открыта. Если закрыть панель, а колбэк не снять, при каждом следующем запросе Inertia он будет вызываться снова, и счётчики или подсказки начнут удваиваться.

Метод on у router возвращает функцию снятия слушателя. Её сохраняют и вызывают, когда обработчик больше не нужен. В компоненте Vue удобно передать эту функцию в onUnmounted, чтобы при уходе со страницы подписка исчезла сама.

Давайте отдадим страницу с переключаемой панелью:

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

	Route::get('/posts/settings', function () {
		return Inertia::render('Posts/Settings');
	});
?>

Давайте включим панель, подпишемся на start и снимем слушатель при размонтировании:

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

	const panelOpen = ref(true)
	const startCount = ref(0)

	const removeStartListener = router.on(
		'start',
		() => {
			startCount.value += 1
		},
	)

	onUnmounted(removeStartListener)

	function closePanel() {
		panelOpen.value = false
		removeStartListener()
	}
</script>

<template>
	<h1>Settings</h1>
	<div v-if="panelOpen">
		<p>Starts: {{ startCount }}</p>
		<button type="button" @click="closePanel">
			Close panel
		</button>
	</div>
</template>

Сделайте модальное окно фильтра работников так, чтобы подписка на завершение запроса, повешенная при открытии, снималась при закрытии окна и не срабатывала лишний раз при следующих переходах.