While using Pinia in a Vue.js 3 project, I encountered an issue. The problem arises when I attempt to load constant JSON structures from my backend using the file src/store/constants.store.ts
// @ts-check
import { defineStore } from "pinia"
import ConstantsApi from "@/api/constants"
export const useConstantsStore = defineStore("constants", {
state: () => ({
instanceTiers: [],
instanceStatuses: [],
queueStatuses: [],
countries: [],
areConstantsLoaded: false,
}),
actions: {
async fetchConstants() {
this.instanceTiers = await ConstantsApi.instanceTiers();
this.instanceStatuses = await ConstantsApi.instanceStatuses();
this.queueStatuses = await ConstantsApi.queueStatuses();
this.countries = await ConstantsApi.countries();
this.areConstantsLoaded = true;
},
},
})
This code relies on the functions defined in src/api/constants.ts
import {api} from "./api"
export default {
instanceTiers() {
return api("GET", "/instance_tiers");
},
// More API functions...
}
The core function for making API requests is located in src/api/api.ts, where authorization details are stored:
import {APISettings} from './config';
import {useAuthStore} from "@/stores";
import {useNotificationStore} from '@/stores';
const authStore = useAuthStore();
const notificationStore = useNotificationStore();
// Function for handling API requests
export function api(method: string, url: string, data?: any): Promise<any> {
// API request logic here
}
Authorization credentials are stored in src/store/auth.store.ts:
// @ts-check
import { defineStore } from "pinia"
export const useAuthStore = defineStore("auth", {
state: () => ({
token: JSON.parse(localStorage.getItem("token")) as string,
idToken: JSON.parse(localStorage.getItem("idToken-parsed")),
logoutUrl: localStorage.getItem("logout-url") as string,
loginUrl: localStorage.getItem("login-url") as string,
}),
getters: {
getToken: (state) => {
return state.token
},
// More getters...
},
actions: {
logout() {
// Logout action logic here
},
},
})
A central store index file src/stores/index.ts is also present in the project:
export * from "./auth.store";
// More store exports...
import { createPinia } from "pinia";
export const pinia = createPinia();
An error message "Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?" occurs when loading a page.
In my src/main.ts file, I have set up Pinia like this:
import { createApp } from "vue"
import { pinia } from "./stores"
import App from "./App.vue"
import { router } from "./router";
import "./assets/main.css"
const app = createApp(App);
app.use(pinia);
app.use(router);
app.mount("#app");
Changing the content of src/stores/constants.store.ts seems to resolve the issue:
// @ts-check
import { defineStore } from "pinia"
export const useConstantsStore = defineStore("constants", {
state: () => ({
instanceTiers: [],
instanceStatuses: [],
queueStatuses: [],
countries: [],
areConstantsLoaded: false,
}),
actions: {
async fetchConstants() {
this.instanceTiers = [];
this.instanceStatuses = [];
this.queueStatuses = [];
this.countries = [];
this.areConstantsLoaded = true;
},
},
})