Axios请求在组件中正常运行，为何在Pinia Store中失效？如何修复？

核心原因 #

1. Axios配置不一致：组件中使用的Axios可能已配置baseURL、请求拦截器（如添加token）等，而Store中直接导入的原生Axios无这些配置，导致相对路径/getDBList解析错误，请求处于pending状态，await无法得到返回结果。
2. 错误捕获不完整：原代码的catch块仅打印固定字符串，无法获取请求失败的具体原因（如404、跨域、请求头缺失等），难以定位问题。
3. 状态非响应式：原代码中collectionArr是普通数组，即使请求成功，组件也无法感知数据变化（非请求卡住的直接原因，但影响后续数据使用）。

修复方案 #

1. 统一Axios实例 #

优先使用项目中封装好的Axios实例（比如@/utils/axios），确保Store和组件使用相同配置：

// 替换原生axios导入为项目封装的实例
import axios from '@/utils/axios'

若未封装实例，直接在Store中指定完整请求URL：

const response = await axios.get('http://your-server-domain/getDBList')

2. 声明响应式状态 #

用ref将collectionArr转为响应式状态，确保数据更新后组件能实时获取：

import { ref } from 'vue'

// ...
const collectionArr = ref([])

3. 完善错误捕获 #

在catch块中打印完整错误对象，便于排查请求失败的具体原因：

catch (error) {
  console.error('获取集合列表失败:', error)
  // 可根据错误类型添加处理逻辑，比如提示用户
}

完整修复后的Store代码 #

import { defineStore } from 'pinia'
import { ref } from 'vue'
// 使用项目封装的Axios实例或指定完整URL
import axios from '@/utils/axios'

export const useAdminDashboardStore = defineStore('useAdminDashboardStore', () => {
  const collectionArr = ref([])
  
  const getCollectionsNames = async () => {
    try {
      console.log('works from async!')
      const response = await axios.get('/getDBList')
      console.log('after response')
      collectionArr.value = response.data
    } catch (error) {
      console.error('请求获取集合列表失败:', error)
    }
  }

  return { collectionArr, getCollectionsNames }
})

验证步骤 #

1. 打开浏览器开发者工具的Network面板，调用getCollectionsNames后查看请求的URL、状态码和响应内容。
2. 检查请求头是否包含必要参数（如token），确认和组件中发送的请求一致。

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