Vue3项目中Pinia内调用Axios方法报错的问题咨询

你遇到的是循环依赖+Pinia初始化时机冲突：

• utils/request.js在模块顶层直接调用useUserStore()，此时模块加载阶段Pinia的store还未完成初始化（你的store又导入了依赖request的userGetInfoService），导致调用失败。
• 这种互相引用的模块关系形成了循环依赖，触发了Pinia未就绪的错误。

修复步骤 #

修改utils/request.js，将useUserStore()的调用从模块顶层移到请求拦截器内部：

import axios from 'axios'
// 移除模块顶层的useUserStore调用
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'

const baseURL = 'xxxx'
const instance = axios.create({
  baseURL: baseURL,
  timeout: 1000
})

instance.interceptors.request.use(
  function (config) {
    // 在这里动态获取store，此时Pinia已初始化完成
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

//........

export default instance
export { baseURL }

原理说明 #

模块顶层代码会在import时立即执行，此时你的Pinia store还在加载过程中（store依赖request，request又依赖store），导致useUserStore()无法获取到有效的store实例。

将useUserStore()移到请求拦截器内部后，它只会在实际发起请求时执行，这时候Pinia已经完成初始化，store实例可以正常获取，同时也打破了模块层面的循环依赖。

内容的提问来源于stack exchange，提问作者Xinran Shen