How to access store in routes.js file (not index.js)?



  • I have a typical routes.js file like this and i cannot access the store.even i am able to dispatch an action for the store by accessing store given below but still store state is not updated?Why? Thus instead of doing this way i removed routes.js file and then in index.js i was able to update store.

    import store from '../store';
    import {userPortfolio} from '../dummy';
    
    const routes = [{
        path: '/',
        component: () => import('layouts/MainLayout.vue'),
        children: [{
            name: 'Home',
            path: '',
            component: () => import('pages/Home.vue')
          },
          {
            name: 'Devices',
            path: 'devices',
            component: () => import('pages/Devices.vue')
          },
          {
            name: 'FirmwaresOverview',
            path: 'firmwaresOverview',
            component: () => import('pages/FirmwaresOverview.vue')
          },
          {
            name: 'Firmwares',
            path: 'firmware/:id',
            props: true,
            component: () => import('pages/Firmware.vue')
          },
          {
            name: 'Feedback',
            path: 'feedback',
            component: () => import('pages/Feedback.vue')
          }
        ],
        beforeEnter(to,from,next){
          // Make Api Call and populate store:
          // Apicall.then(data=>{
          //   store().dispatch("common/initializeData",data)
          // })
    
          // Dummy data
          store().dispatch("common/initializeData",userPortfolio);
          next();
        }
      },
    
      // Always leave this as last one,
      // but you can also remove it
      {
        path: '*',
        component: () => import('pages/Error404.vue')
      }
    ]
    
    
    export default routes
    
    

    Improvised index.js file :

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import {userPortfolio} from '../dummy';
    
    // import routes from './routes'
    
    const defaultPush = VueRouter.prototype.push;
    VueRouter.prototype.push = function push(location) {
      return defaultPush.call(this, location).catch(err => err)
    };
    
    
    
    Vue.use(VueRouter)
    
    /*
     * If not building with SSR mode, you can
     * directly export the Router instantiation;
     *
     * The function below can be async too; either use
     * async/await or return a Promise which resolves
     * with the Router instance.
     */
    
    export default function ( { store } ) {
      const Router = new VueRouter({
        scrollBehavior: () => ({ x: 0, y: 0 }),
        routes:[{
          path: '/',
          component: () => import('layouts/MainLayout.vue'),
          children: [{
              name: 'Home',
              path: '',
              component: () => import('pages/Home.vue')
            },
            {
              name: 'Devices',
              path: 'devices',
              component: () => import('pages/Devices.vue')
            },
            {
              name: 'FirmwaresOverview',
              path: 'firmwaresOverview',
              component: () => import('pages/FirmwaresOverview.vue')
            },
            {
              name: 'Firmwares',
              path: 'firmware/:id',
              props: true,
              component: () => import('pages/Firmware.vue')
            },
            {
              name: 'Feedback',
              path: 'feedback',
              component: () => import('pages/Feedback.vue')
            }
          ],
          beforeEnter(to,from,next){
            // Make Api Call and populate store:
            // Apicall.then(data=>{
            //   store().dispatch("common/initializeData",data)
            // })
      
            // Dummy data
            store.dispatch("common/initializeData",userPortfolio);
            next();
          }
        },
      
        // Always leave this as last one,
        // but you can also remove it
        {
          path: '*',
          component: () => import('pages/Error404.vue')
        }
      ],
    
        // Leave these as they are and change in quasar.conf.js instead!
        // quasar.conf.js -> build -> vueRouterMode
        // quasar.conf.js -> build -> publicPath
        mode: process.env.VUE_ROUTER_MODE,
        base: process.env.VUE_ROUTER_BASE
      })
    
      return Router
    }
    
    




  • @dobbel i have already looked into that post it explains how to use store in “index.js” file and not in “routes.js” file which gets imported into index.js file 😕





  • @Abdullah-Sohail

    import store from '../store/index.js';

    instead of

    import store from '../store';



  • @Abdullah-Sohail you must export your store instance, like this https://forum.quasar-framework.org/topic/4685/trouble-accessing-data-from-boot-file/4?_=1597281324493, then import it anywhere via import { store } from 'yourStorePath', or make your routes.js a function that will accept an argument and return the routes array, in your case passing the store context from your router/index.js. unless you are using SSR, exporting the store instance is the way to go.




Log in to reply