$q is undefined when used in store that's accessed in router navigation guard

[Advistane]

Hello all, I know the title sounds like a lot so let me break it down a bit.

Quasar Version 2.6.0

I have a store named "user" that handles settings, login/logout, database (Firestore) updates, etc.
Part of these settings is dark mode.
So a quick overview is like so:

export const useUserStore = defineStore('user-store', () => {
const $q = useQuasar();
const currentUser: Ref<User|null> = ref(); // User model I created

function setDarkMode() {
    $q.dark.set(settings.value.darkMode);
  }

function updateDb() { //Updates the Firestore db based on data in other stores if currentUser isn't null
...
}

Now, I'd like updateDb() to be called any time the page is changed. To do so, I'm taking advantage of the afterEach navigation guard. That code looks like so:

Router.afterEach(async () => {
    const userStore = useUserStore();
    await userStore.updateDb();
  });

Now, this works fine. However, it completely breaks the dark mode functionality of my site with this in the console:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dark')
    at user.ts:117:14

which is the setDarkMode() function from above.

I've also noticed this error in the console:
[Vue warn]: inject() can only be used inside setup() or functional components.
This error is caused by const $q = useQuasar();.

Now, I've looked at the Quasar App Flow documentation and it looks like Quasar is initialized before anything else so I'm confused as to why $q (the Quasar instance) is coming is as undefined.

The setDarkMode() functionality works perfectly fine when the navigation guard isn't created so I know it has something to do with the userStore being initialized in the guard.

If anyone has any ideas I'd greatly appreciate it. Thanks!

[dongwa]

Referring to https://quasar.dev/quasar-plugins/dark#outside-of-a-vue-file:

Instead of using useQuasar outside of a Vue file, you can use import { Dark } from 'quasar'.

Alternatively, you can move the const $q = useQuasar(); code to the setDarkMode function because you do not call setDarkMode in Router.afterEach.