共有データ

アプリケーション内の多数のページで特定のデータにアクセスする必要がある場合があります。例えば、サイトヘッダーに現在のユーザーを表示する必要があるかもしれません。アプリケーション全体で各レスポンスにこのデータを手動で渡すのは面倒です。幸いなことに、より良い方法があります。それは共有データです。

データの共有

Inertiaのサーバーサイドアダプターはすべて、すべてのリクエストで共有データを利用できるようにする方法を提供しています。これは通常、コントローラーの外で行われます。共有データは、コントローラーで提供されるページプロップと自動的にマージされます。

Laravelアプリケーションでは、これは通常、サーバーサイドアダプターをインストールすると自動的にインストールされるHandleInertiaRequestsミドルウェアによって処理されます。

class HandleInertiaRequests extends Middleware
{
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            // Synchronously...
            'appName' => config('app.name'),

            // Lazily...
            'auth.user' => fn () => $request->user()
                ? $request->user()->only('id', 'name', 'email')
                : null,
        ]);
    }
}
HandleInertiaRequestsミドルウェアは、「share」メソッドを提供しており、各Inertiaレスポンスと自動的に共有されるデータを定義できます。

あるいは、Inertia::shareメソッドを使用して、手動でデータを共有することもできます。

use Inertia\Inertia;

// Synchronously...
Inertia::share('appName', config('app.name'));

// Lazily...
Inertia::share('user', fn (Request $request) => $request->user()
    ? $request->user()->only('id', 'name', 'email')
    : null
);
すべての共有データはすべてのレスポンスに含まれるため、共有データの使用は控えめにすべきです。
ページプロップと共有データはマージされるため、衝突を避けるために共有データを適切に名前空間化してください。

共有データへのアクセス

サーバーサイドでデータを共有したら、任意のページやコンポーネント内でアクセスできるようになります。レイアウトコンポーネントで共有データにアクセスする方法の例を以下に示します。

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

const page = usePage()

const user = computed(() => page.props.auth.user)
</script>

<template>
  <main>
    <header>
      You are logged in as: {{ user.name }}
    </header>
    <content>
      <slot />
    </content>
  </main>
</template>

フラッシュメッセージ

共有データのもう一つの優れたユースケースは、フラッシュメッセージです。これは、次のリクエストのみにセッションに保存されるメッセージです。例えば、タスクを完了して別のページにリダイレクトする前に、フラッシュメッセージを設定することが一般的です。

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>