Vue 中首次登录 store 无法获取用户信息的解决方案是什么？

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《Vue 中首次登录 store 无法获取用户信息的解决方案是什么？》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

vue 中首次登录时 store 无法获取的问题解决方案

在 vue 中，首次登录进入页面时无法从 store 中获取值的常见原因是使用了 mapstate 但没有正确获取整个 state 对象。在给出的问题中，代码中使用了 mapstate({ userinfo: (state) => state.user.userinfo }) 来映射 store 中的 userinfo 值，但这种写法仅获取了 userinfo 的子对象，而不是完整的 state 对象。

在方法中，调用 this.userinfo.username 时会返回 undefined，因为 this.userinfo 本身就是 undefined。因此，需要修改 mapstate 以获取整个 state 对象，如下所示：

computed: {
  ...mapstate([
    'user', // 获取完整的 user state
  ]),
},

然后，在方法中可以这样访问 username 值：

async gettoptendata(params) {
  let data;
  this.searchloading = true
  try {
      data = await getcommtime({
          account: this.user.userinfo.username,
          dimension: this.activetoggle,
          params
      })
  } catch (error) {
      throw new error(error)
  } finally {
      this.searchloading = false
  }
  return { data: data.comm_task_list }
},

此外，问题中提到了将 username 保存到 localstorage 的代码。该代码应该修改为：

if (code === 0) {
  localStorage.setItem('userInfo', data) // 保存整个 data 对象
  commit('SET_USERINFO', data)
} else {
  ...
}

通过进行这些修改，userinfo 值应该可以在首次登录进入页面时从 store 和 localstorage 中正确获取。

今天关于《Vue 中首次登录 store 无法获取用户信息的解决方案是什么？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！