How can i access the store from routes.ts using typescript

[lesourcil]

Hi,

i’ve created my quasar project using the CLI and im using Typescript.

Here is my store/index.js

import { store } from 'quasar/wrappers';
import Vuex from 'vuex';

// import example from './module-example';
// import { ExampleStateInterface } from './module-example/state';
import { mainModule } from './main';
import { State } from './state';
/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation
 */

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.
  example: unknown;
}

export default store(function ({ Vue }) {
  Vue.use(Vuex);

  const Store = new Vuex.Store<State>({
    modules: {
      main: mainModule
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: !!process.env.DEV
  });
  return Store;
});

Now im my router/route.js

import { RouteConfig } from 'vue-router';
import store from "../store/";
import { Notify } from 'quasar';

const routes: RouteConfig[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/Index.vue')
      },
      { 
        path: 'aci-subnet',
        component: () => import('pages/AciSubnet.vue'),
        beforeEnter: (to, from, next) => {
          console.log(store)
          if (!store.getters.main.readIsLoggedIn) {
            Notify.create('Please sign in to access this page')
          }
          else{
            next()
          }
        }
      },
}
...

export default routes;

When I try to access the store i get this error -->
TS2339: Property ‘getters’ does not exist on type ‘StoreCallback’.

Can anybody help me ?

[kennyrafael]

I facing the same issue, not exactly on routes.ts, but I need to access store outside a component and I’m not sure of how I can do it.

It will be amazing if someone can help!!!

[lesourcil]

@kennyrafael

Hey Kenny,

i was able to fix it by export the store at initialisation

import { store } from 'quasar/wrappers';
import Vuex from 'vuex';

// import example from './module-example';
// import { ExampleStateInterface } from './module-example/state';
import { mainModule } from './main';
import { State } from './state';
/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation
 */

--> let myStore
 
export default store(function ({ Vue }) {
  Vue.use(Vuex);

  const Store = new Vuex.Store<State>({
    modules: {
      main: mainModule
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: !!process.env.DEV
  });
-->  myStore = Store
  return Store;
});

--> export  { myStore }

Then import it in another vue file

import { myStore }  from "../store";

...

  if (!myStore.getters.isLoggedIn) {
    ...
 }

Enjoy

[kennyrafael]

Thanks buddy!!

[twa]

Hi @kennyrafael thanks for this tip.

Is this considered a best practice or there is a better way?

[metalsadman]

@twa yes it’s good, but only for non SSR apps.