Vue3中Header组件created/mounted无法获取正确store.isLoggedIn值问题

这是典型的异步时序不匹配问题，拆解逻辑顺序就能明白：

1. 应用启动时，router.beforeEach触发后，里面的axios.get('/api/is-loggined')是异步请求——浏览器不会等这个请求完成，会直接继续执行页面渲染流程。
2. Header组件的created/mounted钩子属于组件挂载的同步执行阶段，此时登录验证的异步请求还没返回结果，store.isLoggedIn还是初始的false状态。
3. 只有当登录验证请求完成、store.isLoggedIn被更新为true时，watch监听到状态变化才会触发后续获取用户数据的逻辑。

• 方案一：共享登录验证的Promise，让Header组件等待验证完成后再判断状态

  // app.js 中导出登录验证的Promise
  export const loginCheckPromise = axios.get('/api/is-loggined').then(res => {
    store.isLoggedIn = res.data.isLoggedIn
  })
  
  // Header组件内
  import { loginCheckPromise } from '../app.js'
  async mounted() {
    await loginCheckPromise
    if (store.isLoggedIn) {
      // 调用/api/get-user-data接口逻辑
    }
  }
  

• 方案二：把获取用户数据的逻辑整合到登录验证的回调中，直接将用户数据存入store，Header组件直接读取store中的用户数据即可，无需单独处理状态判断。
• 方案三：让路由守卫等待验证完成后再渲染页面（会导致页面短暂空白，需权衡体验）

  router.beforeEach(async (to, from, next) => {
    const res = await axios.get('/api/is-loggined')
    store.isLoggedIn = res.data.isLoggedIn
    next()
  })
  

内容的提问来源于stack exchange，提问作者yads nasx