В связке Laravel + Vue + Inertia.js данные передаются из контроллера в компоненты Vue через объект props. Но передача данных в layout отдельно от данных страницы слегка отличается от стандартного подхода с использованием props. В данном случае можно использовать глобальный состояние (global state) в Inertia.js, чтобы передать данные в layout.
Для начала, вам потребуется установить и настроить Inertia.js в вашем проекте Laravel. Руководство по установке и настройке Inertia.js можно найти в официальной документации.
После установки Inertia.js вам нужно настроить ваше приложение для использования глобального состояния. В Inertia.js глобальное состояние представляет собой объект, который может быть использован в любом компоненте, включая layout.
Для передачи данных в layout от других компонентов, мы можем использовать глобальное состояние следующим образом:
1. Создайте новый класс GlobalState.php в каталоге app/Http/Middleware и определите метод handle, который будет устанавливать значение глобального состояния:
<?php
namespace AppHttpMiddleware;
use Closure;
use InertiaInertia;
class GlobalState
{
public function handle($request, Closure $next)
{
Inertia::share('appName', config('app.name'));
return $next($request);
}
}
В приведенном выше примере мы устанавливаем значение 'appName' в глобальное состояние с помощью метода share(), и передаем значение из файла конфигурации приложения.
2. Зарегистрируйте созданный Middleware в каталоге app/Http/Kernel.php, добавив его в конец массива глобального Middleware:
protected $middleware = [
// ...
AppHttpMiddlewareGlobalState::class,
];
3. В вашем компоненте Vue, вы можете получить глобальное состояние следующим образом:
export default {
props: {
appName: String,
},
// ...
}
4. В примере ниже определяется главный layout компонента, который принимает данные из глобального состояния:
<template>
<div>
<h1>{{ appName }}</h1>
<slot></slot>
</div>
</template>
<script>
export default {
props: {
appName: String,
},
}
</script>
В данном случае, значение 'appName' передается в layout из глобального состояния.
Теперь, когда вы создали глобальное состояние и передали его в layout, вы можете использовать его для вывода данных на вашей странице.
Надеюсь, данный ответ был полезен и помог вам понять, как правильно передать данные в layout отдельно от данных страницы в связке Laravel + Vue + Inertia.js.