Vue.js 2如何通过Axios与Store返回用户列表并渲染到表格？

我帮你排查出代码里的几个关键错误，这就是你获取不到用户列表、返回空数组的原因：

1. 变量名拼写/引用混乱 #

你的代码里存在多处变量名不匹配的问题，导致数据根本没被正确添加到数组里：

• 定义了const alluser = data[key]，但后续赋值ID时用了未定义的user.id = key，应该改为alluser.id = key
• 创建的数组是allUsers，但推数据时用了不存在的users.push(user)，正确写法是allUsers.push(alluser)
• 提交mutation时用了大写开头的AllUsers，但你的数组变量是小写开头的allUsers，大小写不匹配会导致提交无效值

2. 错误处理不完整 #

你的catch部分代码没写完，建议补全错误日志，方便排查请求失败的情况。

修正后的完整代码 #

allUsers ({commit, state}) {
  if (!state.idToken) {
    return
  }
  globalAxios.get('/users.json')
    .then(res => {
      const data = res.data
      const allUsers = []
      // 统一变量名，避免拼写混乱
      for (let key in data) {
        const user = data[key]
        user.id = key
        allUsers.push(user)
      }
      // 注意变量名大小写匹配
      commit('storeUser', allUsers)
    })
    // 补全错误处理，方便排查问题
    .catch(error => console.log(error))
}

额外检查建议 #

• 确认/users.json返回的数据结构是键值对对象（比如{ "user1": {...}, "user2": {...} }），如果返回的是纯数组，for...in循环就不适用了，需要改成data.forEach(user => {...})
• 检查你的storeUser mutation函数，确保它正确接收并存储传入的allUsers数组

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