Vue3中Pinia在Router.afterEach无法获取API加载后的数据问题

问题根源 #

router.afterEach是路由跳转完成后立即触发的钩子，但App.vue中获取用户角色的API请求是异步操作，路由跳转完成时，这个请求大概率还处于pending状态，Pinia Store里的org.organization还未被赋值，所以直接获取会返回null；添加延时后API请求刚好完成，数据已存入Store，因此能拿到正确值。本质是路由钩子的执行时机早于异步API的响应时机，两者没有做同步关联。

具体解决方案 #

方案1：将初始化API移至路由前置守卫（推荐）

通过router.beforeEach拦截路由，确保必要数据加载完成后再进入目标页面，从根源上解决时机不匹配问题：

// router/index.js
import { useOrgStore } from '@/stores/org'
import { getCurrentUserRole } from '@/api/user'

router.beforeEach(async (to, from, next) => {
  const orgStore = useOrgStore()
  // 仅在Store无数据时发起请求，避免重复调用
  if (!orgStore.organization) {
    try {
      const res = await getCurrentUserRole()
      orgStore.setOrganization(res.data) // 假设Store中有对应的赋值方法
      next()
    } catch (error) {
      // 处理请求失败逻辑，例如跳转至登录页
      next({ path: '/login' })
    }
  } else {
    next()
  }
})

这种方式能保证路由进入前，org.organization已被正确赋值，此时在router.afterEach中直接获取即可拿到有效值。

方案2：监听Pinia数据变化触发逻辑

如果不想修改路由守卫，可以将原本在router.afterEach中的逻辑，移至App.vue中监听org.organization的变化，待数据就绪后再执行：

<!-- App.vue -->
<script setup>
import { useOrgStore } from '@/stores/org'
import { watch } from 'vue'
import { useRouter } from 'vue-router'

const orgStore = useOrgStore()
const router = useRouter()

// 监听组织数据，就绪后执行目标逻辑
watch(
  () => orgStore.organization,
  (newOrgData) => {
    if (newOrgData) {
      // 此处放置原本router.afterEach中的业务逻辑
      console.log('当前组织数据：', newOrgData)
    }
  },
  { immediate: true } // 初始化时立即检查一次数据状态
)
</script>

这种方式无需依赖延时，数据准备完成后会自动触发逻辑，更可靠。

方案3：调整App.vue中API的执行时机

如果App.vue中原本是在onMounted中发起API请求，由于onMounted是组件挂载后执行，此时路由已完成跳转，会导致数据滞后。可以将请求移至setup函数中结合await执行，但需注意要配合路由守卫的等待逻辑，否则仍可能出现时机问题，因此不单独推荐此方案，建议结合方案1使用。

内容的提问来源于stack exchange，提问作者uneeb meer