Laravel Inertia - Shared data

공유 데이터

데이터 공유하기

애플리케이션 내의 여러 페이지에서 특정 데이터에 액세스해야 할 때가 있습니다. 예를 들어, 사이트 헤더에 현재 사용자를 표시해야 할 수 있습니다. 전체 애플리케이션에 걸쳐 각 응답에 이 데이터를 수동으로 전달하는 것은 번거롭습니다. 다행히 더 나은 방법이 있습니다: 공유 데이터.

Inertia 의 서버 측 어댑터는 모든 요청에 공유 데이터를 사용할 수 있는 방법을 제공합니다. 이는 일반적으로 컨트롤러 외부에서 수행됩니다. 공유 데이터는 컨트롤러에서 제공된 페이지 props와 자동으로 병합됩니다.

Laravel 애플리케이션에서는 일반적으로 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,
        ]);
    }
}

HandleInertiaRequests 미들웨어는 각 인터시아 응답에 자동으로 공유될 데이터를 정의할 수 있는 "share" 메소드를 제공합니다.

또는 Inertia::share 메소드를 사용하여 수동으로 데이터를 공유할 수 있습니다.

use Inertia\Inertia;

// 동기적으로...
Inertia::share('appName', config('app.name'));

// 지연적으로...
Inertia::share('user', fn (Request $request) => $request->user()
    ? $request->user()->only('id', 'name', 'email')
    : null
);

공유 데이터는 모든 응답에 포함되므로 신중하게 사용해야 합니다.

페이지 props와 공유 데이터는 병합되므로, 공유 데이터의 이름을 적절히 지정하여 충돌을 피하십시오.

공유 데이터 접근하기

서버 측에서 데이터를 공유하면, 페이지나 컴포넌트에서 이를 접근할 수 있습니다. 아래는 레이아웃 컴포넌트에서 공유 데이터에 접근하는 예시입니다.

<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')
            ],
        ]);
    }
}

다음으로, 사이트 레이아웃과 같은 프론트엔드 컴포넌트에서 플래시 메시지를 표시합니다.



```html
<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>