Access router in Pinia store defined using composition API (Setup store)

[charlycou]

From the doc, Router can be accessed in Option API store such as:

import { defineStore } from 'pinia'

export const useWhateverStore = defineStore('whatever', {
  // ...
  actions: {
    whateverAction () {
      this.router.push('...')
    }
  }
}

How can I achieve the same using Composition API store ?

import { defineStore } from 'pinia'

export const useWhateverStore = defineStore('whatever', ()  => {
  
  const whateverAction = () => {
      //This action use router
    }
  }
}

[MilosPaunovic]

Webpack: https://quasar.dev/quasar-cli-webpack/state-management-with-pinia#accessing-the-router-in-pinia-stores
Vite: https://quasar.dev/quasar-cli-vite/state-management-with-pinia#accessing-the-router-in-pinia-stores

[charlycou]

Thanks for pointing the doc. I've already read through the docs (my example is literally a copy/paste of the example of the doc). The documentation only provides example of accessing router from store defined using Option API. But you Pinia also proposes to define store using Composition API (Setup store) https://pinia.vuejs.org/core-concepts/#setup-stores. So my question is how can I access router from setup up stores?

[MilosPaunovic]

The same.

[charlycou]

 App • ⚠️  Failed to open default browser

11:22:32 AM [vite] warning: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
156|          mapStore.abortController.abort();
157|        }
158|        if (this.router.currentRoute.value.name == "mapView") {
   |            ^
159|          mapStore.getMapItemsPage(filterState.value);
160|          mapStore.areMapItemsQueried = true;

[charlycou]

The warning may be related to Vite only though: vitejs/vite#8644. I probably got tricked by Typescript compiler that say that this is undefined. I'll let you know.

[charlycou]

this is indeed undefined in setup store and cannot be used.

[yusufkandemir]

With Pinia setup stores you should be able to use useRouter from vue-router directly.

[davedew]

@TobyMosque well that's just sad. Thank you for the clarification!

[TobyMosque]

@davedew another possibility, is u're initializing the auth store in the router/index.js

bad

import { route } from 'quasar/wrappers';
import { useAuthStore } from 'src/stores/auth';

export default route(function ({ store }) {
  // store initialized before the router be injected
  const authStore = useAuthStore(store)
  const Router = createRouter({ ... })
  
  Router.beforeEach((to, from) => {
    authStore.doSomething()
  })
  
  return Router;
}

good

import { route } from 'quasar/wrappers';
import { useAuthStore } from 'src/stores/auth';

export default route(function ({ store }) {
  const Router = createRouter({ ... })
  
  Router.beforeEach((to, from) => {
    // store initialized after the router be injected
    const authStore = useAuthStore(store)
    authStore.doSomething()
  })
  
  return Router;
}

[davedew]

@TobyMosque Thanks again for your ideas. I changed the arrows to functions, still no luck. Here is my scenario. I have a login layout page. I pull in the authstore on that page, on login there is a function in the authstore to finalize the login. It looks like this. I abbreviated it for the conversation:

function finalizeLogin (redirect, accountBeenChosen = false) {
  if (getAllAccountsForThisApp.value.length > 1 && !accountBeenChosen) {
    this.router.push('/choose-account')
  }
}

I always get: TypeError: this is undefined on that line.

I do have a boot file. It starts like this:

import { boot } from 'quasar/wrappers'
import { useAuthUserStore } from 'stores/auth'
import { Notify } from 'quasar'

export default boot(({ urlPath, store, router }) => {
  const authStore = useAuthUserStore()
  router.beforeEach(async (to, from) => {

Could that be a problem?

I did try changing it to this:

import { boot } from 'quasar/wrappers'
import { useAuthUserStore } from 'stores/auth'
import { Notify } from 'quasar'

export default boot(({ urlPath, store, router }) => {
router.beforeEach(async (to, from) => {
  const authStore = useAuthUserStore(store)
   router.beforeEach(async (to, from) => {

But saw no difference

[TobyMosque]

@davedew that looks like a typescript error. do u're using TS or JS?

if TS, u can declare the type of the this...

export const useAuthUserStore = defineStore('authStore', () => {
  function doRight(this: AuthUserStore) {
    console.log(this.router)
  }
})
type AuthUserStore = ReturnType<typeof useAuthUserStore>

otherwise, u can use the pinia itself as a ioc container, what works very well to me (JS or TS)...

1 - first, declare a empty store to use as ioc container
src/store/di.ts

export const useDiStore = defineStore('di', () => ({}))

2 - create a composable to exposed the router:
src/composables/router.ts

export function useRouter(store: Pinia) {
  const di = useDiStore(store)
  return di.router
}

3 - import the composable in the stores

import { useRouter } from 'src/composables/router'

export const useAuthUserStore = defineStore('authStore', () => {
  const router = useRouter()
  function doRight() {
    console.log(router)
  }
})

[davedew]

Hi @TobyMosque I'm using JS. I might try that ioc container, or I might just keep it in Options api to not have to do that.. lol. Thanks again for your help!

[litvinenkow]

because of Quasar wrappers you need to do so, please look at the function notations of router variable, this is function exactly

import router from "src/router";
...
export default store((/* { ssrContext } */) => {
  const pinia = createPinia();

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

  return pinia
})

than you will get what you want in every pinia store, that's it

[davedew]

@litvinenkow Nice! Thank you!

[devpixde]

none of the above suggestions works for me. why is this so complicated?

e.g. store.router = markRaw(router()) Error: Cannot assign to router because its a read only
and also the suggestion with the composable did not work for me

Isn'there an easier option to add router to a composition api pinia store in quasar?

[yusufkandemir]

Quasar CLI already assigns router to store via a store.use call. So, doing that is rather pointless. Furthermore, router() would create another router instance, so it's even worse. this.router works fine in option-style stores.

For setup-style stores, useRouter works fine. But, if you are calling a store, e.g. useXyzStore() outside a component, e.g. in a boot file, then it doesn't work. That is because of how Pinia interacts with Vue injection scopes. You can try a makeshift IoC approach as mentioned here: #15468 (reply in thread)
You said none of them works, but might have missed this one.

For further help, you can post what you are trying to do and get offered an alternative solution.