Vue Router in Pinia

User
// stores/auth.ts
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

Assistant
You're facing an issue because `useRouter()` is being called at the top level of your Pinia store, outside of the setup function or component context. This causes an error because `useRouter()` is only available within Vue's setup or component lifecycle.

## 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`. ๐Ÿš€

Leave a Comment

Your email address will not be published. Required fields are marked *