Vue Router in Pinia
March 9, 2025 ยท AI Conversations
import { defineStore } from 'pinia';
import { useRouter } from 'vue-router';
const router = useRouter();
interface User {
id: number;
name: string;
email: string;
}
export const useAuthStore = defineStore('auth', {
state: () => ({
user: localStorage.getItem('user') ? (JSON.parse(localStorage.getItem('user')!) as User) : null,
token: localStorage.getItem('token') || null,
}),
getters: {
isAuthenticated: (state) => !!state.token, // Returns true if token exists
},
actions: {
setUser(user: User, token: string) {
this.user = user;
this.token = token;
localStorage.setItem('user', JSON.stringify(user));
localStorage.setItem('token', token);
},
logout() {
this.user = null;
this.token = null;
localStorage.removeItem('user');
localStorage.removeItem('token');
router.push('/register');
}
}
});
router push not worked here
## Solution:
Move `useRouter()` inside the `logout` action to ensure it is used within the correct context.
### Updated Code:
// stores/auth.ts
import { defineStore } from 'pinia';
import { useRouter } from 'vue-router';
interface User {
id: number;
name: string;
email: string;
}
export const useAuthStore = defineStore('auth', {
state: () => ({
user: localStorage.getItem('user') ? (JSON.parse(localStorage.getItem('user')!) as User) : null,
token: localStorage.getItem('token') || null,
}),
getters: {
isAuthenticated: (state) => !!state.token, // Returns true if token exists
},
actions: {
setUser(user: User, token: string) {
this.user = user;
this.token = token;
localStorage.setItem('user', JSON.stringify(user));
localStorage.setItem('token', token);
},
logout() {
this.user = null;
this.token = null;
localStorage.removeItem('user');
localStorage.removeItem('token');
// Use `useRouter` inside the action
const router = useRouter();
router.push('/register');
}
}
});
## Why does this work?
– `useRouter()` should only be called **inside a Vue component's setup function** or inside an **action** in Pinia (as long as it's within the correct execution context).
– Since `logout()` is an action that gets executed within a component, `useRouter()` is correctly initialized when it's called.
Now, calling `authStore.logout()` from any component should successfully redirect to `/register`. ๐