Nuxt•2y ago

How to navigate inside pinia store?

After I received my token from the backend I want to navigate the user to /, unfortunately navigateTo("/") doesnt work

LOGIN(_username: string, _password: string): void {
      console.info("Logging in with", _username, _password)
      this.username = _username;

      this.token = "Bearer Tokenasd asdasd asd"

      navigateTo("/")
    }

LOGIN(_username: string, _password: string): void {
      console.info("Logging in with", _username, _password)
      this.username = _username;

      this.token = "Bearer Tokenasd asdasd asd"

      navigateTo("/")
    }

5 Replies

Unknown User•2y ago

Message Not Public

JoniOP•2y ago

Hello thanks for your answer, this doesn't work tho, even typescript gives an error:

Property '$router' does not exist on type '{ LOGIN: (_username: string, _password: string) => void; LOGOUT(): void; } & { _id: string; username: string; role: string; token: string; } & _StoreWithState<"auth", { _id: string; username: string; role: string; token: string; }, { ...; }, { ...; }> & _StoreWithGetters<...> & PiniaCustomProperties<...>'.ts(2339)

Property '$router' does not exist on type '{ LOGIN: (_username: string, _password: string) => void; LOGOUT(): void; } & { _id: string; username: string; role: string; token: string; } & _StoreWithState<"auth", { _id: string; username: string; role: string; token: string; }, { ...; }, { ...; }> & _StoreWithGetters<...> & PiniaCustomProperties<...>'.ts(2339)

JoniOP•2y ago

Solution: https://pinia.vuejs.org/core-concepts/plugins.html#adding-new-external-properties plugin file looks like this:

import { markRaw } from 'vue'
// adapt this based on where your router is
export default defineNuxtPlugin(() => {
  usePinia().use(({ store } : any) => {
    store.router = markRaw(useRouter())
  })
})

import { markRaw } from 'vue'
// adapt this based on where your router is
export default defineNuxtPlugin(() => {
  usePinia().use(({ store } : any) => {
    store.router = markRaw(useRouter())
  })
})

Pinia 🍍

Intuitive, type safe, light and flexible Store for Vue

Unknown User•2y ago

Message Not Public

JoniOP•2y ago

After implementing the solution I posted above, you can call this.router.push('/') inside your actions of your store

Gaming

Programming

How to navigate inside pinia store?