Laravel 10与Vue 3无法传递登录用户数据至组件的问题

核心原因 #

在Blade模板中向Vue组件传递user属性时，直接使用{{Auth::user()}}会输出PHP对象的字符串表示（如App\Models\User Object (...)），而非合法的JSON格式。Vue的动态绑定:user无法将这种字符串解析为有效的JavaScript对象，导致组件接收的user值无效，进而无法正确更新Vuex状态，最终使得侧边菜单的v-if="$store.state.user"判断不成立。

修复步骤 #

1. 修正Blade中的属性传递

将welcome.blade.php中的组件调用代码修改为：

@if(Auth::check())
    <mainapp :user="@json(Auth::user())"></mainapp>
@else 
    <mainapp :user="false"></mainapp>
@endif

@json()指令会将PHP对象序列化为合法的JSON字符串，Vue会自动将其解析为JavaScript对象，确保组件能正确接收用户数据。

2. （可选）直接利用全局window.Laravel.user

既然你已经在Blade中把用户数据挂载到了window.Laravel.user，也可以跳过props传递，直接在组件中读取全局变量：
修改mainapp.vue的created钩子：

created(){
    const user = window.Laravel.user || false;
    console.log('mainapp user', user);
    this.$store.commit('updateUser', user);
}

同时可以移除组件的props: ['user']配置，这种方式更简洁，也避免了Blade动态绑定可能出现的格式问题。

3. 验证Vuex状态更新

确保store.js中的updateUser mutation正确赋值：

updateUser(state, data){
    state.user = data;
    console.log('Updated user state:', state.user); // 可选：添加日志验证
}

验证方法 #

完成修改后，打开浏览器控制台：

• 查看组件created钩子的console.log输出，确认user是有效的用户对象而非字符串。
• 查看Vue DevTools（如果安装）中的Vuex状态，确认user字段已正确更新为用户数据。

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