Vue路由器+ Vuex：如何使每个路由守卫等待Vuex状态更改？

Question

在我的SPA中，页面加载时的部分初始化操作是从API提取登录的用户，然后将用户记录与initialized标志一起存储在状态中。

在路由器beforeEach防护中，我需要检查用户是否已登录，但是要使其正常运行，我需要等待，直到initialized标志设置为true 。如何让我的功能等待呢？我应该进入商店并创建观察者，还是将另一个变量设置为promise或其他内容？

谢谢！

Answer 1

您可以像这样在路由器上实现基本的“暂停”功能（代码未经测试）：

// Router is initially not paused
let pausedResolve = null
let pausedPromise = Promise.resolve()

router.beforeEach(async (to, from, next) => {
  await pausedPromise
  next()
})

function pause() {
  if (!pausedResolve) {
    pausedPromise = new Promise(resolve => pausedResolve = resolve)
  }
}

function resume() {
  if (pausedResolve) {
    pausedResolve()
    pausedResolve = null
  }
}

创建路由器后，立即调用pause()，然后登录调用resume()（也许可以在Vuex代码中进行此操作）。

此实现的好处是路由器代码不依赖于Vuex代码（通常最好将代码保持松散耦合）。