Laravel Jetstream中用Inertia usePage获取共享数据返回undefined如何解决

问题原因 #

• 存在同名变量优先级冲突：你在setup中返回了从共享数据读取的assetsPath，同时又在组件props中声明了同名的assetsPath属性。Vue组件的props优先级高于setup返回的属性，你使用布局组件时没有传入该prop，因此读取到的是undefined。
• usePage取值写法错误：Inertia的usePage()返回的是ref对象，实际的共享props需要通过.value获取，你的取值逻辑少了这一步。

修复方案 #

1. 移除props中重复的assetsPath声明 #

删掉props定义里的assetsPath: String,行即可：

props: {
    title: String,
},

2. 修正setup中的取值逻辑 #

修改computed的返回值，补充.value读取实际的共享数据：

setup ()
{
    const assetsPath = computed( () => usePage().props.value.assetsPath )
    return { assetsPath }
},

修改完成后重新编译前端资源即可正常读取到共享的assetsPath值。

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