I'm currently developing a Vue.js application using Vite, and I have a Pinia store that I want to monitor. Below is the content of my store.js file:
import { defineStore } from 'pinia';
const useStore = defineStore('store', {
state: () => ({
currentLayout: {},
currentPuzzle: {},
difficulty: 2,
solvedPuzzles: new Set(),
}),
actions: {
setLayout(layout) {
this.currentLayout = layout;
},
setPuzzle(puzzle) {
this.currentPuzzle = puzzle;
}
}
});
export default useStore;
In order to monitor it, I attempted the following just before the export statement:
const store = useStore();
... // some vue.js watching logic
However, when I invoke useStore at this point, I encounter the error:
Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?
Upon further investigation with console.logs, I discovered that the main.js file is executed after store.js, causing Pinia not to be instantiated yet. How can I resolve this issue? And what determines the execution order of these JavaScript files in a Vue.js application?
I am working with Vue v3.3.4, Vite v4.3.9, and Pinia v2.1.4 (all up-to-date versions).