Laravel Inertia+Vue.js项目登录后无法自动刷新页面以显示用户信息的问题求助

我最近在用Laravel+Inertia+Vue.js做一个项目，目前卡在登录和登出的页面更新问题上——每次登录成功后，顶部导航栏的用户名不会自动显示，得手动刷新页面才出来；登出的时候我加了location.reload()勉强解决了，但登录这块试了好几种方法都没搞定。下面是我项目里的相关代码片段，麻烦各位大佬帮我看看问题出在哪？

1. login.vue 登录组件代码 #

<template>
  <form @submit.prevent="login">
    <div class="lg:w-1/3 mx-auto sm:w-1/2 md:w-1/2 xl:w-1/3">
      <div>
        <label for="email" class="label">E-mail</label>
        <input v-model="form.email" type="text" id="email" class="input" />
        <div class="input-error" v-if="form.errors.email">{{form.errors.email}}</div>
      </div>
      <div class="mt-4">
        <label for="password" class="label">Password</label>
        <input v-model="form.password" type="password" id="password" class="input" />
        <div class="input-error" v-if="form.errors.password">{{form.errors.password}}</div>
      </div>
      <div class="mt-4">
        <button class="btn-primary w-full" type="submit">Login</button>
      </div>
    </div>
  </form>
</template>

<script setup>
import { useForm } from '@inertiajs/vue3';

const form = useForm({
  email: null,
  password: null,
})

const login = () => form.post(route('login.store'))
</script>

2. mainlayout.vue 主布局组件代码 #

<template>
  <header class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 w-full">
    <div class="container mx-auto">
      <nav class="p-4 flex items-center justify-between">
        <div class="text-lg font-medium">
          <Link :href="route('formation.index')">Formations</Link>
        </div>
        <div class="text-xl text-indigo-600 dark:text-indigo-200 font-bold text-center">
          <Link :href="route('formation.index')"> E-learning </Link>
        </div>
        <div>
          <div v-if="user" class="flex items-center gap-4">
            <div class="text-sm text-gray-500">{{ user.name }}</div>
            <div class="btn-primary">
              <Link :href="route('formation.create')">+ New formation</Link>
            </div>
            <div>
              <Link :href="route('logout')" method="delete" as="button" @click="logout">
                Logout
              </Link>
            </div>
          </div>
          <div v-else>
            <Link :href="route('login')">Sign-in</Link>
          </div>
        </div>
      </nav>
    </div>
  </header>
  <main class="container mx-auto p-4 w-full">
    <slot>Default</slot>
  </main>
</template>

<script setup>
import { computed } from "vue";
import { Link, usePage } from "@inertiajs/vue3";

const page = usePage();
const user = computed(() => page.props.user);

const logout = async () => {
  await fetch(route('logout'), {
    method: 'DELETE',
  });
  location.reload(); // 登出后刷新页面才能隐藏用户信息
}
</script>

3. AuthController 的 store 登录处理方法 #

public function store(Request $request){
    if(!Auth::attempt($request->validate([
        'email' => 'required|string|email',
        'password' => 'required|string',
    ]),true)){
        throw ValidationException::withMessages([
            'email' => 'Authentication failed'
        ]);
    };

    $request -> session() -> regenerate();

    return redirect()->intended('/formation');
}

我自己的猜测 #

我感觉问题应该出在Inertia的页面props更新上——登录成功后，页面的user prop没有自动更新，所以主布局里的user computed值还是null，直到刷新页面才重新获取到用户数据。但我不知道怎么让登录后自动更新这个props，不用手动刷新。

有没有大佬能指点一下？谢谢啦！

备注：内容来源于stack exchange，提问作者user20824723