I encountered an issue while trying to access a store in Pinia for my Vue web application. Despite installing Pinia and setting app.use(createPinia()), I keep receiving the following error message:
Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?Here are the relevant sources:
Vue file:
<script>
import SideUpBar from "@/components/SideUpBar.vue";
import {mapActions, mapState} from "pinia"
import { useUsersStore } from "@/stores/users"
const usersStore = useUsersStore()
export default {
name: "NewView",
components: {SideUpBar},
data: () => ({
//
}),
computed: {
...mapState(useUsersStore, ['users']),
},
methods: {
// ...mapActions(useUsersStore, ['fetchUsers']),
},
created() {
usersStore.fetchUsers()
},
}
</script>
<template>
<v-layout class="dim">
<SideUpBar/>
<v-main style="background: #C19A6B">
<v-list
:items="users"
item-title="username"
></v-list>
</v-main>
</v-layout>
</template>
<style>
.dim {
width: 100vw;
height: 100vh;
}
</style>
main.js:
import '@mdi/font/css/materialdesignicons.css'
import { createApp } from 'vue'
import {createPinia, setActivePinia} from 'pinia'
import App from './App.vue'
import router from './router'
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify= createVuetify({
components,
directives,
})
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(vuetify)
app.mount('#app')
users.js (store):
import {defineStore} from "pinia"
import axios from "axios";
import {ca} from "vuetify/locale";
export const useUsersStore = defineStore("user", {
state: () => ({
users: [],
}),
actions: {
async fetchUsers() {
try {
const data = await axios.get('api/users')
let users = data.data.data
this.users = users
console.log(data)
} catch (e) {
alert(e)
console.log(e)
}
},
},
})
Thank you!