Inertia+Vue3中使用@inertiajs/vue3的usePage()异常问题

1. 新旧版usePage访问结果差异的原因 #

旧版@inertiajs/inertia-vue3的usePage是为Vue 3 Options API设计的，返回普通对象，且只有组件挂载完成后才会被Inertia注入数据。而新版@inertiajs/vue3的usePage返回的是响应式Proxy对象，属于Composition API的响应式实现。

你在setup顶层直接打印新版page时，Inertia可能还未完成页面props的注入，控制台快照会显示page.props为undefined，但这个Proxy对象本身是响应式的，后续props加载完成后会自动更新。旧版用ref()包裹后，ref的响应式特性会在Inertia初始化完成时自动捕获更新后的page对象，因此能正常访问props。

2. 旧版需用ref()包裹、新版不需要的原因 #

• 旧版usePage在setup执行早期（组件挂载前）调用时，Inertia还未完成页面实例初始化，直接调用会返回undefined。用ref()包裹后，ref会在Inertia注入数据时自动更新值，所以能通过page2.value拿到正确结果。
• 新版usePage内部已经处理了初始化时机与响应式更新逻辑，返回的就是响应式Proxy对象，不需要额外用ref()包裹。强行包裹后需通过page.value.props访问，完全没必要且增加复杂度。

新版usePage的正确用法 #

直接获取响应式对象，在组件挂载完成后访问或在模板中直接使用：

import { usePage, onMounted } from '@inertiajs/vue3';

const page = usePage();

// 组件挂载后访问props，确保Inertia已完成数据注入
onMounted(() => {
  console.log('认证状态:', page.props.auth.authenticated);
  console.log('页面props:', page.props);
});

// 模板中直接使用，响应式自动更新
// <template>
//   <div v-if="page.props.auth.authenticated">已登录</div>
//   <div v-else>未登录</div>
// </template>

若需监听某个props的变化，可配合watch使用：

import { watch } from 'vue';

watch(() => page.props.auth.authenticated, (newStatus) => {
  console.log('认证状态变更:', newStatus);
});

内容的提问来源于stack exchange，提问作者cartbeforehorse