Общие данные

Иногда Вам нужно получить доступ к определенным данным на многочисленных страницах Вашего приложения. Например, обычным вариантом использования для этого является отображение текущего пользователя в заголовке сайта. Передавать эти данные вручную в каждом ответе нецелесообразно. В этих ситуациях могут быть полезны общие данные.

Обмен данными

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

/*
|----------------------------------------------------------------
| Через мидлвар HandleInertiaRequests (рекомендуется)
|----------------------------------------------------------------
*/

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [

            // Синхронно
            'appName' => config('app.name'),

            // Отложенно
            'auth.user' => fn () => $request->user()
                ? $request->user()->only('id', 'name', 'email')
                : null,
        ]);
    }
}

/*
|----------------------------------------------------------------
| Вручную
|----------------------------------------------------------------
*/

use Inertia\Inertia;

// Синхронно
Inertia::share('appName', config('app.name'));

// Отложенно
Inertia::share('user', fn (Request $request) => $request->user()
    ? $request->user()->only('id', 'name', 'email')
    : null
);

По промежуточного слоя HandleInertiaRequests предоставляет метод «совместного использования», в котором Вы можете определить данные, которые автоматически будут совместно использоваться с каждым ответом Inertia.

Используйте эту функцию с осторожностью, поскольку общие данные включаются в каждый ответ.

Реквизиты страницы и общие данные объединяются вместе, поэтому не забудьте правильно указать пространство имен для общих данных.

Доступ к общим данным

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

<template>
  <main>
    <header>
      <div>Вы вошли как: {{ user.name }}</div>
      <nav>
        <inertia-link href="/">Главная</inertia-link>
        <inertia-link href="/about">О нас</inertia-link>
        <inertia-link href="/contact">Контакты</inertia-link>
      </nav>
    </header>
    <content>
      <slot />
    </content>
    <footer></footer>
  </main>
</template>

<script>
  import { computed } from 'vue'
  import { usePage } from '@inertiajs/inertia-vue3'

  export default {
    setup() {
      const user = computed(() => usePage().props.value.auth.user)
      return { user }
    },
  }
</script>

Доступ к общим данным с помощью свойства $page или хука usePage().

Быстрые сообщения

Еще один отличный вариант использования общих данных - это флэш-сообщения. Это сообщения, хранящиеся в сеансе только для следующего запроса. Вы часто устанавливаете флэш-сообщение после завершения задачи и перед перенаправлением на другую страницу.

Вот простой способ реализовать флэш-сообщения в Ваших приложениях Inertia. Сначала поделитесь флэш-сообщением по каждому запросу.

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'flash' => [
                'message' => fn () => $request->session()->get('message')
            ],
        ]);
    }
}

Затем отобразите флэш-сообщение во внешнем компоненте, таком как макет сайта.

<template>
  <main>
    <header></header>
    <content>
      <div v-if="$page.props.flash.message" class="alert">
        {{ $page.props.flash.message }}
      </div>
      <slot />
    </content>
    <footer></footer>
  </main>
</template>

На этой странице