Vue3 Vitesse模板组件外使用Pinia提示无活跃Pinia错误求助

你遇到的错误核心原因是：http-client.ts在模块加载阶段就执行了useNotificationsStore()，而此时main.ts里的Pinia还未完成初始化（createApp还没挂载Pinia到应用实例），导致没有活跃的Pinia实例可供调用。开发服务器加载完成后再添加代码能正常运行，是因为此时Pinia已经完成初始化了。

方案1：延迟获取Store实例（推荐） #

将useNotificationsStore()的调用移到axios拦截器的回调函数内部，这些回调会在应用初始化完成、Pinia已挂载后才执行（即发起请求/收到响应时），避免在模块加载阶段提前调用。

修改后的http-client.ts代码：

import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import axios from 'axios'
import tokenService from './token.service'
import { useNotificationsStore } from '~/store/notification.store'

const httpClient: AxiosInstance = axios.create({
  baseURL: `${import.meta.env.VITE_APP_API_URL}/`,
  headers: {
    'Content-Type': 'application/json',
  },
})

httpClient.interceptors.response.use(
  (response) => {
    if (response.config.method !== 'get') {
      const successMsg = 'operation successfully completed'
      // 在这里才获取store实例
      const notification = useNotificationsStore()
      notification.addNotification({ type: 'success', message: successMsg })
    }
    return response
  },
  (error) => {
    // 在这里才获取store实例
    const notification = useNotificationsStore()
    
    if (error.message === 'Network Error') {
      notification.addNotification({ type: 'error', message: 'Network Error' })
      return Promise.reject(error)
    }
    
    let errorMessage = ''
    const validationErrors = getValidationErrors(error)
    errorMessage = getErrorMessage(error)
    notification.addNotification({ 
      type: 'error', 
      message: errorMessage, 
      validationErrors, 
      hideAfterRouting: false 
    })
    
    // 注意：必须返回Promise.reject，否则axios会将错误视为成功响应
    return Promise.reject(error)
  }
)

方案2：手动传入Pinia实例 #

如果你需要在模块级别提前初始化Store，可以在main.ts中导出已创建的Pinia实例，然后在http-client.ts中手动传入useNotificationsStore。

1. 修改main.ts：

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

// 创建并导出Pinia实例
export const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

2. 修改http-client.ts：

import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import axios from 'axios'
import tokenService from './token.service'
import { useNotificationsStore } from '~/store/notification.store'
import { pinia } from '~/main'

// 手动传入已初始化的Pinia实例
const notification = useNotificationsStore(pinia)

const httpClient: AxiosInstance = axios.create({
  baseURL: `${import.meta.env.VITE_APP_API_URL}/`,
  headers: {
    'Content-Type': 'application/json',
  },
})

// 后续拦截器代码保持不变...

注意：此方案需要确保main.ts中的Pinia实例先于http-client.ts加载，否则仍会出现报错。在Vitesse模板中，默认的模块加载顺序通常能满足，但如果遇到问题，优先选择方案1。

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