Vuex Actions返回undefined/null求助：登录后无法展示用户姓名

嘿，我来帮你梳理下当前代码里的问题，这些问题正是导致你点击登录后只显示access token、部分变量undefined的原因：

核心问题分析 #

1. 直接修改Vuex State，跳过Mutation
   Vuex要求所有state的修改必须通过mutation完成，你在pullUserDetails里直接给store.state.user的属性赋值，这种方式Vue无法追踪到响应式变化，所以页面上无法更新用户姓名等信息。

2. Authorization请求头格式错误
   API请求的Authorization头里，Bearer和token之间需要加空格，你现在写的'Bearer' + store.state.accessToken会变成类似Bearerabc123，不符合标准格式，导致API返回错误，自然拿不到用户数据，相关变量就会是undefined。

3. Action调用方式错误
   在init action里，你直接通过store.actions.setToken调用其他action，正确的做法应该用store.dispatch('setToken')。

4. LocalStorage读写逻辑问题
   当localStorage.getItem('accessToken')不存在时，你会JSON.parse('')，这会抛出语法错误，应该先判断是否存在再解析。

5. Mutations存在重复逻辑
   你同时定义了setToken和SET_TOKEN两个mutation，功能重复，容易造成混淆。

修复后的代码 #

修改后的index.js (Vuex) #

import vuex from 'vuex'; 
import axios from 'axios'; 
import mutations from './mutations'; 

const createStore = () => { 
  return new vuex.Store({ 
    state: { 
      accessToken: "",
      user: { 
        dob: null, 
        email: null, 
        firstName: null, 
        gender: null, 
        id: null, 
        lastName: null, 
        profileImage: null, 
        registered: null, 
        verified: null 
      } 
    }, 
    getters: { 
      accessToken: state => state.accessToken,
      // 新增获取用户全名的getter，方便页面调用
      fullUserName: state => `${state.user.firstName || ''} ${state.user.lastName || ''}`.trim()
    }, 
    actions: { 
      init({ dispatch }) { 
        // 先获取localStorage的值，存在再解析
        const token = localStorage.getItem('accessToken');
        if (token) {
          dispatch('setToken', JSON.parse(token));
        }
      }, 
      setToken({ commit }, value) { 
        commit('SET_TOKEN', value); 
      }, 
      login({ commit, dispatch }, value){ 
        commit('SET_TOKEN', value); 
        dispatch('pullUserDetails'); 
      }, 
      async pullUserDetails({ state, commit }){ 
        try {
          const response = await axios.get( 
            'https://api.ticketpass.co/user', 
            { 
              headers: { 
                // Bearer后添加空格，修正请求头格式
                'Authorization' : `Bearer ${state.accessToken}` 
              } 
            } 
          ); 
          console.log(response.data);
          // 通过mutation更新user信息，保证响应式
          commit('SET_USER_DETAILS', response.data);
        } catch (error) {
          console.error('获取用户信息失败:', error);
          // 这里可以根据需求处理错误，比如清空user或者提示用户
          commit('SET_USER_DETAILS', {});
        }
      } 
    }, 
    mutations 
  }); 
}; 

export default createStore; 

修改后的mutations.js #

const mutations = { 
  SET_TOKEN(state, token) { 
    console.log('设置token:', token);
    localStorage.setItem('accessToken', JSON.stringify(token)); 
    state.accessToken = token; 
    console.log('当前state.token:', state.accessToken); 
  },
  // 新增更新用户信息的mutation
  SET_USER_DETAILS(state, userData) {
    // 合并现有user对象和新数据，保留未更新的属性
    state.user = { ...state.user, ...userData };
  }
}; 

export default mutations; 

额外建议 #

• 页面上展示用户姓名时，直接调用我们新增的fullUserName getter，比如：$store.getters.fullUserName，这样如果firstName或lastName为空也不会显示多余空格。
• 建议给axios设置全局请求拦截器，统一处理Authorization头，避免每个请求都重复写。
• 登录时传递的value应该是后端返回的access token字符串，确保格式正确。

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