Vue登录后将用户信息存入Vuex时state.user为空怎么解决？

问题原因 #

常见导致该问题的原因如下：

• Vuex模块开启了namespaced: true命名空间，调用dispatch时未添加对应模块前缀，导致action未被正确触发，mutation自然不会执行更新state
• Vue2响应式规则限制：如果Vuex的state初始化时未显式声明user属性，直接给state.user赋值不属于响应式更新，会出现赋值后读取为空的情况
• 事件触发时序异常：你当前的storeUser方法仅在CheckAuthentication事件回调中执行，若登录完成后未正确触发该事件，或者路由跳转早于store赋值完成，会出现读取时state未更新的问题
• action、mutation未正确注册到Vuex实例，或命名存在拼写错误

解决方法 #

1. 先验证mutation是否被正常触发，在STORE_USER中添加日志确认执行情况和入参：

export const STORE_USER = (state, {user}) => {
    console.log('mutation执行，user参数：', user)
    state.user = user;
}

若日志未输出，说明action未被触发，优先检查命名空间配置：如果你的用户相关Vuex模块开启了命名空间，调用dispatch时需要加上模块前缀，示例如下（假设模块名为user）：

// storeUser方法内修改dispatch写法
this.$store.dispatch('user/storeUser', {
    user: response.data,
})

2. 若mutation执行且入参正常，但store读取为空，处理Vue2响应式问题：
   首先确认state初始化时已显式声明user属性：

// 你的Vuex state定义处
state: {
    user: {} // 必须提前声明，不能省略
}

如果不方便修改初始state，可修改mutation使用Vue.set赋值：

import Vue from 'vue'
export const STORE_USER = (state, {user}) => {
    Vue.set(state, 'user', user)
}

3. 确认登录逻辑的事件触发顺序：在authHelper.signIn的登录成功回调中，先触发CheckAuthentication事件等待用户信息存入store后再跳转路由，避免跳转后读取state时赋值还未完成：

signIn: function () {
    authHelper.signIn(this.email, this.password, () => {
        // 先触发校验事件拉取用户信息存store，再跳转
        EventBus.$emit(GENERAL_APP_CONSTANTS.Events.CheckAuthentication)
        // 可加短暂延迟或等待异步完成后跳转，避免时序问题
        setTimeout(() => {
            this.$router.push({name: 'home'});
        }, 300)
    });
}

4. 最后检查你的mutation、action是否正确注册到Vuex实例，确认命名无拼写错误。

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