Error when Calling store from App.vue with a composable - Error: [🍍]: getActivePinia was called with no active Pinia ?

[yann-yinn]

Hello there ! I'm trying Pinia tonight.

I got the error getActivePinia was called with no active Pinia ? with this code:

App.vue

<script setup lang="ts">
import useAuth from "@/composables/useAuth";

async function logout() {
  const auth = useAuth();
  auth.logout();
}
</script>

<template>
  <div class="text-center">
    <router-link to="/">Home</router-link> |
    <router-link to="/login">Login</router-link> |
    <router-link to="/register">Register</router-link> |
    <a @click="logout">Logout</a>
  </div>
  <div>
    <router-view />
  </div>
</template>

Because @/composables/useAuth.ts begins with

import { useMainStore } from "@/stores";
import useSupabase from "@/composables/useSupabase";

const store = useMainStore();
const supabase = useSupabase();

function login() {
  // supabase + store stuff
}
function logout() {
  // supabase + store stuff
}

Pinia is not yet available, because i guess this code is imported and executed before app.use(createPinia()); had a chance to run.

So ... is it impossible to use const store = useMainStore() at the top of a composable which is imported in App.vue ?

[posva]

You must put it in the composable (or setup function) not inside of the logout function.
There is a using outside of component section ok the docs that explain this 🙂

[yann-yinn]

Ha of course,

So, in my composable, i just had to call useMainStore() inside of my functions, not outside:

Okay ✅

@/composables/useAuth.ts

async function logout() {
  const store = useMainStore();
  const { error } = await supabase.auth.signOut();
  if (error) throw error;
  store.setUser(null);
}

Not okay ❌ ( composable might be imported and might execute useMainStore() before app.use(createPinia()) is executed)

@/composables/useAuth.ts

const store = useMainStore();

async function logout() {
  const { error } = await supabase.auth.signOut();
  if (error) throw error;
  store.setUser(null);
}