无法将API数据存入Vuex State，代码是否存在问题？

核心问题 #

1. 参数解构不匹配
   你的两个mutation都通过{ userdata }、{ token }的解构语法接收参数，但在action的commit调用中，直接传递了原始的user和token值，没有包装成对应键名的对象，导致解构无法拿到正确值，最终无法给state赋值。

2. 缺少调试日志
   你无法在mutations里查看state.token，是因为当前SET_PAYLOAD mutation中没有添加console.log语句，自然不会输出任何内容。

修复后的代码 #

export const AUTH_MUTATIONS = {
    SET_USER: 'SET_USER',
    SET_PAYLOAD: 'SET_PAYLOAD',
    LOGOUT: 'LOGOUT',
}
export const state = () => ({
    token: null,
    userdata: [],
    data: [],
})

export const mutations = {
    [AUTH_MUTATIONS.SET_USER] (state, { userdata }) {
        state.userdata = userdata
        // 新增日志查看userdata赋值结果
        console.log('userdata已更新:', state.userdata)
      },
    
    [AUTH_MUTATIONS.SET_PAYLOAD] (state, { token }) {
        state.token = token
        // 新增日志查看token赋值情况
        console.log('token已更新:', state.token)
    },
}

export const actions = {
    async login ({ commit, dispatch }, { email_id, password }) {
        try {
            const { data: { data: { user, token } } } = await this.$axios.post('http://18.xxx.246.xxx:5000/api/v1/users/login', 
                {
                    email_id,
                    password
                })
            // 先确认API返回的数据是否正确
            console.log('API返回的user:', user)
            console.log('API返回的token:', token)
            
            // 传递参数时包装成对应键名的对象，匹配mutation的解构需求
            commit(AUTH_MUTATIONS.SET_USER, { userdata: user })
            commit(AUTH_MUTATIONS.SET_PAYLOAD, { token: token })
        } catch (error) {
            // 捕获请求错误，避免静默失败
            console.error('登录请求失败:', error)
        }
    },
}

export const getters = { 
    isAuthenticated: (state) => {
      return state.token && state.token !== ''
    },
}

额外建议 #

• 用try/catch包裹异步请求，能及时捕获API请求失败的情况，方便排查问题。
• 在action里先打印API返回的user和token，确认数据确实被正确获取，排除API返回格式错误的可能。

内容的提问来源于stack exchange，提问作者Being MR.G