I'm currently facing challenges while using the Pinia store with TypeScript and implementing the store within a basic app.vue Vuejs3 option api.
Here is my app.js file:
import {createApp} from 'vue'
import {createPinia} from "pinia";
import App from './App';
const pinia = createPinia()
const app = createApp(App);
app.use(pinia);
app.mount('#app');
Now, let's take a look at app.vue:
<script>
import {useAuthStore} from "@app/store/auth.store";
import {useCountryStore} from "@app/store/country.store";
export default {
components: {SidebarMenu},
setup() {
return {
authStore: useAuthStore(),
countryStore: useCountryStore(),
}
},
computed: {
loggedIn: function () {
return this.authStore.status.loggedIn;
}
}
}
</script>
Next up, we have authStore.js:
import {defineStore} from "pinia";
const user = JSON.parse(localStorage.getItem('user'));
export const useAuthStore = defineStore("auth", {
state: () => (
user ? {status: {loggedIn: true}, user} : {status: {loggedIn: false}, user: null}
),
});
And now for CountryStore.ts:
import { defineStore } from "pinia";
import { Country } from "@app/interfaces/country";
export type CountryState = {
countries: Country[],
errors: any[],
}
export const useCountryStore = defineStore("country", {
state: () => ({
countries: [],
errors: []
} as CountryState)
})
In my particular scenario, I keep encountering an error related to countryStore but not AuthStore:
getActivePinia was called with no active Pinia. Did you forget to install pinia?
Interestingly, when I convert my countryStore.ts into .js (and remove type hinting), it works fine!
I've done extensive research trying to figure out what I'm missing or where I'm going wrong. I want to retain TypeScript in the end, but I'm unsure how to resolve this issue.
If anyone can provide assistance, I would greatly appreciate it. Thank you all for your support.