Using 2 stores inside vue component in Options API (getActivePinia was called with no active Pinia error)

[Uraharadono]

Hello, I have issue I cannot find solution for. I have following component:

<script lang="ts">
import { mapActions, mapState } from 'pinia';
import { alertStore } from '@/stores/alert';
import { authenticationStore } from '@/stores/authentication';

export default {
	methods: {
		...mapActions(alertStore, ['clear']),
		...mapState(alertStore, ['getState']),
		...mapActions(authenticationStore, { logout: 'logout' }),
		doLogout() {
			this.logout();
			this.$router.go(); // reload page to setup menu and redirect to login
		},
	},
};
</script>

As you can see I want to use 2 pinia stores inside it alertStore and authenticationStore. They are just regular stores e.g.

interface State {
	email: string;
}
export const authenticationStore = defineStore('authUser', {
	state: (): State => ({
		email: '',
	}),
	getters: {
		getEmail: (state) => state.email,
	},
	actions: {
		// ... other actions
		logout() {
			localStorage.removeItem('currentUser'); // remove user from local storage to log user out
			this.$reset(); // easily reset state using `$reset`
		},
	},
});

But if I do, then I get the following error:

Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
	const pinia = createPinia()
	app.use(pinia)
This will fail in production.
    at useStore (pinia.mjs?e41a:1696:1)
    at eval (authentication.ts?095a:12:1)
    at ./src/stores/authentication.ts (app.js:789:1)
    at __webpack_require__ (app.js:1718:33)
    at fn (app.js:1939:21)
    at eval (index.js??clonedRuleSet-2.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/App.vue?vue&type=script&lang=ts:4:80)
    at ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-2.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[13].use[0]!./src/App.vue?vue&type=script&lang=ts (app.js:734:1)
    at __webpack_require__ (app.js:1718:33)
    at fn (app.js:1939:21)
    at eval (App.vue?vue&type=script&lang=ts:5:285)

It works just fine if I use only 1 store. I found in official example here: https://stackblitz.com/github/piniajs/example-vue-3-vite?file=src%2Fstores%2Fuser.ts, that with Composition API it works just fine.

1. What am I doing wrong here ?
2. How it is possible that in the example above, state can be accessed without mapping getters? e.g. user.name

[Uraharadono]

I have figured it out. I was using another alert.ts store inside my authentication.ts store, but globally.

What helped me figure it out is this: #664 (comment)

So in example:

import { alertStore } from '@/stores/alert';
const aStore = alertStore();  // **having this as global variable, was causing the problem**

interface State {
	status: object | null;
	user?: any;
	firstName: string;
	rememberMe: boolean;
	email: string;
}
export const authenticationStore = defineStore('authUser', {
	state: (): State => ({
			email: '', // have to save it in case of 2fa
	}),
	getters: {
		getEmail: (state) => state.email,
	},
	actions: {
		async login(data: object) {
			aStore.danger('Hello there'); 
		},
	},
});

To fix this I have to remove global const aStore = alertStore(); and use it inside every action I need it in, like so:

import { alertStore } from '@/stores/alert';
interface State {
	status: object | null;
	user?: any;
	firstName: string;
	rememberMe: boolean;
	email: string;
}
export const authenticationStore = defineStore('authUser', {
	state: (): State => ({
			email: '', // have to save it in case of 2fa
	}),
	getters: {
		getEmail: (state) => state.email,
	},
	actions: {
		async login(data: object) {
		       // like this:
			const aStore = alertStore(); 
			aStore.danger('Hello there'); 
			// or just like: 
			alertStore().danger('Hello there'); 
		},
	},
});

I dislike this approach, as I think having one object to control this is much better, but it is what it is.