共享資料

有時您需要在應用程式中的許多頁面上訪問特定的數據。例如，您可能需要在網站標頭中顯示當前使用者。在整個應用程式的每個回應中手動傳遞此資料很麻煩。幸好，有一個更好的選擇：共享資料。

共享資料

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>