Getting handle on router added globally in a store with a "setup function"

[demyte]

Hi all,

I have setup my router in the store globally as showed in the docs:

import type { Router } from 'vue-router'

export interface PiniaCustomProperties {
    router: Router
  }
}

const pinia = createPinia()

pinia.use(({ store }) => {
  store.router = markRaw(router)
})

And my store is being setup with a setup function:

export const useGlobalStore = defineStore('global', () => {

// This leaves router as undefined
const router = useRouter()  

})

My google-fu is failing me trying to work out how to get a handle on that router instance that was injected as I need to use it because const router = useRouter() is undefined.

Thanks :)

[posva]

One could attach the router instance to the pinia instance and retrieve through the active pinia:

import { getActivePinia } from 'pinia'

const pinia = createPinia()
pinia.router = router // extend the Pinia Interface for typings

const useRouter = () => getActivePinia().router as Router

You can use this useRouter() version within setup stores.

In Nuxt, since you don't manually create the router or the pinia, you can add a module or plugin to set the router to the pinia instance

---

Note that if you are not doing SSR, you can just directly import the router variable from your router file.

[posva]

The useRouter is showed you must be used within setup stores. Your version is the same as importing the router directly, if you are not doing SSR, you should do that, it's the simplest way to get the router instance 🙂

[demyte]

I started by using the version you put in as per below but it is coming up as undefined - am I missing something? (I am not doing SSR)

Definition when creating the pinia store

Imported inside the store setup

In use:

[posva]

yes, you are not adding the router to the pinia instance, you are adding it to stores 😅

[demyte]

ahh.. I see my error with missing pinia.router = router... thanks 👍

When I do it that way, I still get an error:

So, I put it in an anonymous function it works:

But I still have to use it right where it is used, not in the top of the store setup - I can live with that.

Thanks again for helping this Pinia novice.

[posva]

Follow the error: you have to do it after both, pinia and the router are initialized, do it in the main.ts file