quasar 2beta useStore in routes.ts is undefined

[juanbill]

Hi,

I'm using quasar 2 beta boilerplate code for the store, and import useStore in the routes.ts, however its undefined.
I created a interface for the getters

What needs to be done so getters for useStore can be accessed in router.ts?

Thanking you guys in advance.

export interface UserGetters extends GetterTree<UserStateInterface, StateInterface> {
  isLoggedIn(state: UserStateInterface): boolean, 
  getErrorState(state: UserStateInterface): string
}

Content of routes.ts

import { RouteRecordRaw } from 'vue-router';
import { useStore } from '../store'
import { UserGetters } from '../store/user/getters'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    beforeEnter: (to, from, next) => {
      const store =  useStore()
      const userGetters = store.getters as UserGetters
      const isUserLoggedIn = userGetters['user/isLoggedIn']
      console.log('isUserLoggedIn',isUserLoggedIn)
      if (!isUserLoggedIn) return next('/login')
      return next('/')
    },
    component: () => import('layouts/main/MainLayout.vue'),
    children: [{ path: '', component: () => import('pages/Index.vue') }],
  },
  {
    path: '/login',
    component: () => import('layouts/login/LoginLayout.vue'),
    children: [{ path: '', component: () => import('pages/login/LoginPage.vue') }]
  },
  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/Error404.vue'),
  },
];

export default routes;

Content store/index.ts

import { store } from 'quasar/wrappers'
import { InjectionKey } from 'vue'
import {
  createStore,
  Store as VuexStore,
  useStore as vuexUseStore,
} from 'vuex'
import user from './user'
import { UserStateInterface } from './user/state'


// import example from './module-example'
// import { ExampleStateInterface } from './module-example/state';

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Store instance.
 */


export interface StateInterface {
  // Define your own store structure, using submodules if needed
  // example: ExampleStateInterface;
  // Declared as unknown to avoid linting issue. Best to strongly type as per the line above.
  user: UserStateInterface
}

// provide typings for `this.$store`
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $store: VuexStore<StateInterface>
  }
}

// provide typings for `useStore` helper
export const storeKey: InjectionKey<VuexStore<StateInterface>> = Symbol('vuex-key')

export default store(function (/* { ssrContext } */) {
  const Store = createStore<StateInterface>({
    modules: {
      user
    },

    // enable strict mode (adds overhead!)
    // for dev mode and --debug builds only
    strict: !!process.env.DEBUGGING
  })

  return Store;
})

export function useStore() {
  return vuexUseStore(storeKey)
}

[metalsadman]

@juanbill store isn't created yet at that point, what you could do is make your router/routes.ts's default export as a function that will accept the store as a parameter, then in your router/index.ts

...
import routes from './routes.ts'
...
export default route<StateInterface>(function ({ store }) { // <--- uncomment store
    ...
    const Router = createRouter({
      ...
      routes(store), // <-- pass the store as parameter, then consume it in your router/routes.ts
    ...
});

[TobyMosque]

Just to complement, the navigation guard is called after all boots be executed, so the store already exists.
But that is called before the component be created, so we hadn't a scope/context yet, so we can't use composables here.
That is valid to any navigation guard, what includes the preFetch.

src/router/routes.ts

import { RouteParams } from '@quasar/app';
import MyState from 'path/to/somewhere';
import { RouteRecordRaw } from 'vue-router';
import clean from './areas/clean';
import main from './areas/main';

export default function (ctx: RouteParams<MyState>): RouteRecordRaw[] {
  const routes: RouteRecordRaw[] = [clean(ctx), main(ctx)];
  return routes;
}

src/router/main.ts

import MyState from 'path/to/somewhere';
import { RouteParams } from '@quasar/app';
import { RouteRecordRaw } from 'vue-router';

export default function (ctx: RouteParams<MyState>): RouteRecordRaw {
  return {
    name: 'main-layout',
    path: '/',
    component: () => import('layouts/main/main.vue'),
    children: [/* other components under the main layout */],
    async beforeEnter (to, from, next) {
      const { store } = ctx
      const isLogged = store.dispatch('ns/doSomething')
      if (isLogged) {
        next()
      } else {
        next({ name: 'logon' })
      }
    }
  }
}