use router in pinia

[arduinoes]

how to use in pinia
"router.push("/")

import { useRouter } from "vue-router";
const router = useRouter();
actions: {
example () {
store.router.push('/auth')
},
import { markRaw } from 'vue'
// adapt this based on where your router is
import { router } from './router'

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

[janjas92]

Hi,
add router to pinia like that:
const pinia = createPinia() pinia.use(({ store }) => { store.router = markRaw(router) }); app.use(pinia)
then you have access to router in pinia store by the this. I don't now why in my case (i use typescript) webstorm don't see this.router but he is there ;) I add @ts-ignore to let phpstorm not complain for now

[janjas92]

Thank you, you're right, after adding this "ts" doesn't complain
So the complete solution looks like this:
declare module 'pinia' { export interface PiniaCustomProperties { router: Router } }

const pinia = createPinia() pinia.use(({ store }) => { store.router = markRaw(router) }); app.use(pinia)

[rashidpathiyil]

Q1: declare module on ./shims-vue.d.ts file or ./modules/pinia.ts- recommended ? (both working)

Any bad practice in this code?

// ./shims-vue.d.ts

// other code here

import "pinia";

declare module "pinia" {
  import type Router from "vue-router"; // is it correct ?
  export interface PiniaCustomProperties {
    router: Router;
  }
}

[janjas92]

In my case i split my code for pinia, router etc to separate modules/files,example below:

// modules/pinia.ts

import {createPinia} from "pinia";
import {markRaw} from "vue";
import router from "@/router/router";
import {Router} from "vue-router";

declare module 'pinia' {
    export interface PiniaCustomProperties {
        router: Router
    }
}

export const install = (app: any) => {
    const pinia = createPinia()
    pinia.use(({ store }) => {
        store.router = markRaw(router)
    });
    app.use(pinia)
}

then i load it in main.ts like that:

import App from './App.vue'

const app = createApp(App);

Object.values(import.meta.globEager('/src/modules/*.ts')).forEach((module) => module.install?.(app))

app.mount('#app')

[webdev-laszlo]

So this actually works, i'm able to the following code in my templates:
{{store.router.currentRoute.value.path}}
And in the Pinia store itself i can use this:
this.router.currentRoute.value.path
only problem now is that when i load the page with lets say http://localhost:4000/#/id/1/ the path value stays / but when i navigate to /id/2/ it goed to id... looks like the router is not reactive/to soon when on first load?

[davidrunger]

Thank you @posva. However, this doesn't quite seem to solve the specific TypeScript issue that I am facing.

If I understand correctly, using declare module 'pinia' { export interface PiniaCustomProperties { router: Router } } declares a this.router property type for all Pinia stores, even if a this.router property has not actually been added to a certain store. In my app, however, which is essentially a monorepo consisting of multiple mostly separate front-end apps, I have some Pinia stores that have a this.router property, whereas other Pinia stores are not integrated with vue-router and don't have a this.router property.

How can I tell TypeScript about the existence and type of the this.router property for the Pinia stores that have it, while not telling TypeScript that all of my Pinia stores have a this.router property (since not all of them do)?

[gokhantaskan]

I'm using firebase and want to redirect the user to the login page if he/she is not authenticated. I followed the steps above and there is no error.

The thing is that I'm using the store as a composable and cannot reach this. I tried getCurrentInstance ,and it returns null. How can I get the router object inside a composable pinia store?

[josh2112]

I found the same thing; This seems to be geared toward accessing the router property from outside the created store, which doesn't help, because I can easily get to the router via useRouter() when I'm not in the store. I need the router inside the store, and using these tricks I am actually able to access it within store functions using this.router, as long as those functions have been called from outside the store (in my case, from a Vue View). But Typescript still complains about my use of this when I do it, and I do not like red squigglies.

In the end I ended up just passing the router into whatever store functions need it when I call them.

[dsubo]

In order to get access to router inside of defineStore. You can instantiate a "dummy" store which has a router property on it.

const useWorkspacesStore = defineStore('workspaces', () => {
  const routerStore = useRouterStore();
   // now you have access to router inside of your store
  console.log(routerStore.router);
})

const useRouterStore = defineStore('routerStore', () => {
  // can be an empty definition
  return {};
});

[ga676005]

I just import the router from its file.
import { router } from '@/router'

[juan-carvajal]

@dsubo Your solutions seems to work. Thank. Tho we should not have to do this to access the router inside setup stores, seems weird. Any official solutions? I can't find anything in the docs either.

[artush-alexanyan]

Seems, simple, but working fine over other solutions. Thanks!