Laravel10+Vue3+Vuex4用户状态传递异常：菜单无法渲染

1. 确保Blade中全局用户数据注入正确 #

首先要保证Blade模板里的window.Laravel.user是合法的JS对象，不要直接用echo输出，用Laravel的@json指令自动处理转义：

<!-- 在Blade模板的</body>标签前添加 -->
<script>
window.Laravel = {
    user: @json(Auth::user())
};
</script>

注：如果用户未登录，Auth::user()会返回null，这时候window.Laravel.user就是null，菜单自然不会渲染，要确认当前是已登录状态。

2. 在Vue组件中正确读取全局数据并提交到Vuex #

在MainApp.vue中，利用组件的生命周期钩子读取全局变量，再提交到Vuex的mutation：

<template>
    <div v-if="currentUser">
        <!-- 你的菜单内容 -->
    </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { onMounted, computed } from 'vue';

const store = useStore();

// 用computed封装用户状态，更易维护
const currentUser = computed(() => store.state.user);

onMounted(() => {
    // 用可选链避免window.Laravel不存在时报错
    const userData = window.Laravel?.user;
    if (userData) {
        store.commit('updateUser', userData);
    }
});
</script>

注意：Vue 3的<script setup>语法中没有this，必须通过useStore()获取Vuex实例，不要尝试用this.$store。

3. 配置Vuex的Mutation正确更新状态 #

确保你的Vuex store中存在updateUser mutation，并且正确接收参数更新state：

// store/index.js
import { createStore } from 'vuex';

export default createStore({
    state: {
        user: null // 初始化为null
    },
    mutations: {
        updateUser(state, userData) {
            // 直接赋值用户数据到state
            state.user = userData;
        }
    },
    actions: {},
    getters: {}
});

检查点：mutation的名称要和组件中commit的名称完全一致（大小写敏感），不要出现拼写错误。

常见排查点 #

• 确认window.Laravel的注入顺序：必须在Vue实例初始化之前加载，也就是把注入的<script>放在Vue的引入脚本之前。
• 检查控制台是否有报错：比如window.Laravel未定义，或者mutation名称错误，这些都会导致数据无法正常存入Vuex。
• 验证用户是否真的已登录：可以在控制台打印window.Laravel.user，确认是否包含用户的真实数据，而不是null。

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