Javascript 拉维公司；Vue：在使用呈现任何组件之前，从存储中初始化身份验证

我目前正在使用laravel&Vue进行一个项目

我想要实现的目标 在呈现任何Vue组件以在导航栏中包含用户名之前，我希望对用户进行身份验证

问题 我面临的问题是，Vue Navbar组件是在用户经过身份验证并且存储中的状态已更新之前呈现的。因此，导航栏不会显示用户名，因为组件没有更新

问题 在创建带有组件的“新vue”之前，我如何访问存储区、提交变异（userauthentification）？或者：如何实现组件在身份验证完成后立即更新的反应性

或者，我尝试使用“computed”更新状态，并在更新store.state.user之后更新用户名。我想这不起作用，因为我还没有完全理解反应性，尽管我读了很多关于它的书

Infos 以下是一些背景信息：

• 我使用Laravel设置路由（前端和后端）
• 我使用layout.blade文件，并在专用的laravel视图文件中包含Vue组件
• 使用JWT进行身份验证（这很好）

这是我的layout.blade.php

齿轮箱
@include（'includes.header'）
@产量（‘含量’）
@include（'includes.footer'）

以下是我在您的代码中看到的几个问题：

Vuex突变是同步的，Vuex动作是异步的

您的业务逻辑必须执行操作，因为它们是异步的（即axios调用），并且您的数据更新/操作应该执行

在“AUTH_USER”操作中，您正在进行axios调用，而该调用应该在“authUser”操作中进行

\\ Your SET_USER mutation could look like below 

SET_USER(state, payload) {

  \\ User data will be passed in 2nd param (i.e payload) 
  state.user = payload

  \\ if we get the data in payload then set loggedin 
  \\ variable to true otherwise false
  state.loggedin = (payload) ? true : false

}

---

非常感谢！！！这节省了很多麻烦和工作。只是为了让它正确：每当我有异步任务时，我都会将承诺放在操作中，而不是变异，对吗？是的，基本上所有的业务逻辑、api查询等都会进入“操作”，然后在完成后，通过调用适当的变异来“提交”结果。这是我最近构建的示例应用程序，它可能对您的组件组织、vuex、测试等方面有所帮助。[git repo]

\\ Your authUser vuex action could look like below, returning the promise 
authUser: ({ commit }) => {
   return axios
     .get("api/register", {
        headers: {
          Authorization: `Bearer ${localStorage.usertoken}`
        }
      })
      .then((response) => {
        commit("SET_USER",response.data.user);                
      })
      .catch((err) => {
        console.log(err, "Konnte keine Daten abrufen");
      });

}