Laravel Inertia共享Props在Vue组件setup中无法获取的问题求助

核心问题 #

你在Vue3的setup函数里使用this导致报错，因为Vue3 Composition API的setup函数不存在this上下文，它和Options API的执行逻辑完全不同，不能用this来访问props或组件实例属性。

两种正确的解决方式 #

方式1：通过Props声明并直接使用

如果你已经把sharedata作为props传递给Navigation组件，直接在setup中解构props即可：

<script setup>
import { onMounted } from 'vue';

// 声明props
const props = defineProps({
  sharedata: String
});

onMounted(() => {
  // 直接通过props对象访问，不需要this
  console.log(props.sharedata);
});
</script>

方式2：直接通过Inertia的usePage获取共享数据

因为你是在HandleInertiaRequests的share方法中全局共享的sharedata，Inertia会自动把这些数据挂载到$page.props上，无需单独声明props，直接用usePage钩子获取即可：

<script setup>
import { onMounted } from 'vue';
import { usePage } from '@inertiajs/vue3';

const page = usePage();

onMounted(() => {
  console.log(page.props.sharedata);
});
</script>

补充说明 #

Laravel Breeze + Inertia生成的项目默认使用Vue3的Composition API（<script setup>语法），这种语法下不需要也不能使用this，所有的props、响应式状态、生命周期钩子都要通过对应的Composition API函数来处理。

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