Laravel 拉威尔+；VUEJ遇到异步问题

我的Vuejs/Laravel应用程序存在异步问题

如果用户已连接，我在vuex中拥有：我的状态用户和状态令牌。我在本地存储中设置了这个令牌，如果我的用户是F5（刷新页面），我可以用它重新登录他

这是我的商店（名称空间：auth）：

My app.js，我这样做是为了重新登录我的当前用户：

store.dispatch('auth/attempt', localStorage.getItem('token'));

对于在路由器中完成路由：

{
    name: 'Login',
    path: '/',
    component: Login,
    beforeEnter: (to, from, next) => {
      console.log('Getter in router : ' + store.getters['auth/authenticated']);
      if (!store.getters['auth/authenticated']){
        next()
      }else {
        return next({
          name: 'Home'
        })
      }
    }
  }

问题出在哪里，如果我调用Home.vue，我的getter“authenticated”工作正常（如果用户连接，则为true，否则为false）

但在我的路由器中，是takeall-time默认值set-in-store（null）。我知道为什么，因为如果我重新加载页面0.5秒，存储状态为空，然后本地存储被学习，我的用户和令牌被创建

我想要（我想）的是路由器等待我的行动尝试，然后他可以做检查

我有一本教程

我真的不知道我需要为我的路由器工作做些什么=(

如果有人能给我解释的话，非常感谢

更新：

如果我这样做，那就是工作：

{
    name: 'Login',
    path: '/',
    component: Login,
     beforeEnter:async (to, from, next) => {
      await store.dispatch('auth/attempt', localStorage.getItem('token'));

      if (!store.getters['auth/authenticated']){
        next()
      }else {
        return next({
          name: 'Home'
        })
      }
    }

但我想了解我真正需要做的是什么，因为这不是一个明确的方式，而是真正的垃圾

更新2：

也许我找到了最好的解决办法，如果有人有其他的方法，我会接受它

{
    name: 'Home',
    path: '/accueil',
    component: Home,
    beforeEnter: (to, from, next) => {
      store.dispatch('auth/attempt', localStorage.getItem('token')).then((response) => {
        if (!store.getters['auth/authenticated']){
          return next({
            name: 'Login'
          })
        }else {
          next();
        }
      });
    }
  }

---

我回答得更清楚了，等待商店是多么容易

在我的app.js中，我有以下内容：

store.dispatch('auth/attempt', localStorage.getItem('token'));

设置为正常每次重新加载都要这样做，但如果我放入一个console.log，我会看到路由器正在执行，并且在“尝试”操作执行之后

因此，删除app.js中的这一行，您可以在之后添加一个.then（）

这样我就有了相同的行代码，但我可以对我的路由器说等待操作“尝试”

---

显然，我不认为sur是最好的方法。但这是工作，我认为这不是一个坏方法！

要找出问题所在有点困难。我建议您下载Vue devtools（浏览器插件firefox/chrome）因此，您可以在它运行时查看状态。确实很难跟踪，devtools肯定会有帮助，我注意到您的存储没有定义为函数/闭包，而是定义为静态对象，如果您在存储中重新导入它，可能会发生冲突。导致为空。此外，请确保您在路由器内导入了存储。a您可以检查模块是否已加载。（另外，vue devtools使加载更容易）您的存储模块是存储的主要入口点中的固定模块，还是动态加载的。这也可能导致这些问题。是的，我使用devtools，我看到vuex状态在0.5s内为空，并在0.5s后设置。但是现在使用直接在路由器中设置的方法store.dispatch可以正常工作。我只是不知道是否有更好的方法来解决这些问题这样做。谢谢你的回复！

store.dispatch('auth/attempt', localStorage.getItem('token'));

router.beforeEach((to, from, next) => {
  store.dispatch('auth/attempt', localStorage.getItem('token')).then(() =>{
    if (store.getters['auth/authenticated']){
      next();
    }else {
      //something other
    }
  })
})