Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?

Question

I was trying to access a store in Pinia for my Vue webapp but, even though I have installed Pinia and set app.use(createPinia()), I get this error:
Uncaught Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"?

Here's the 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)
            }
        },
    },
})

Thanks!

Answer 1

The purpose of wrapping a store in useUsersStore composable is to avoid early instantiation and related race conditions. Composables are generally supposed to be called in the body of component setup and contemporary lifecycle hooks (data, created, etc), any other usage depends on the implementation of a composable. Pinia composables don't have this restriction but calling them earlier than that prevents them from working.

The problem is that useUsersStore is called at the top level of the module. With options API, it should be either:

  created() {
    useUsersStore().fetchUsers()
  },
  ...

Or:

  data: () => ({
    usersStore: useUsersStore()
  }),
  created() {
    this.usersStore.fetchUsers()
  },
  ...