In my Vue.js 3 project using the ViteSse template, I encountered an issue when trying to access my Pinia store named notificationStore outside of the setup component. When running the dev command, I received an error message saying "getActivePinia called with no active Pinia. Did you forget to install Pinia?" The behavior was quite peculiar as the error only occurred if I added useNotificationStore before the dev server loaded. If I added it after, everything worked fine. The error only surfaced when useNotificationStore existed in my ts file and the dev command was run.
To elaborate further, in my http-client.ts file:
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import axios from 'axios'
import tokenService from './token.service'
import { useNotificationsStore } from '~/store/notification.store'
const notification = useNotificationsStore()
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'
notification.addNotification({ type: 'success', message: successMsg })
}
return response
},
(error) => {
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 })
}
)
Upon investigating with some logging, I discovered that the issue arose before createApp was executed, which initialized Pinia and there was no active Pinia at that point. I anticipated createApp in main.ts to have been executed before all.
Thank you in advance for any guidance.