使用 Laravel Vue Inertia 堆栈中的数据重定向路由

Question

在我的控制器中，我有

public function store(Request $request)
    {
        $postData = $this->validate($request, [
            'name' => 'required',
            'status' => 'required | boolean'
        ]);

        Room::create([
            'name' => $postData['name'],
            'active' => $postData['status'],
        ]);

        $message = "Room Added";

        return redirect::route('rooms.index', ['msg' => $message]);
    }

我在道具中使用了“味精”

props:['rooms','errors','msg']

但是对于 {{msg}} 给出未定义的并且没有任何消息。

Answer 1

您将msg作为参数传递给您的路线，而不是作为参数传递给您的Inertia::render调用。 由于您正在重定向，您可能希望将消息闪现到会话并在HandleInertiaRequests中间件上处理它。 查看文档中的示例。

所以，首先你重定向到rooms.index闪烁消息：

return redirect()->route('rooms.index')->with('message', 'My message');

然后，Inertia 以 XHR 请求的形式请求rooms.index路由，在它到达控制器之前，它通过HandleInertiaRequests中间件。

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

现在您可以通过以下方式在组件中访问它：

选项 API

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

组合 API

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

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

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