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 无法获取用户信息的解决方案是什么？的详细内容，更多请关注其它相关文章！