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



  • 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 ?



  • 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!!!



  • @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



  • Thanks buddy!!


Log in to reply