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

[Abdullah Sohail]

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]

@Abdullah-Sohail

https://forum.quasar-framework.org/topic/2825/store-is-no-longer-accessible-in-router/8

[Abdullah Sohail]

@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

[dobbel]

@Abdullah-Sohail

found this:

https://dev.to/mrbrowny/import-store-into-route-js-and-authenticate-routes-in-quasar-3a8m

[dobbel]

@Abdullah-Sohail

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

instead of

import store from '../store';

[metalsadman]

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

[Abdullah Sohail]

@metalsadman @dobbel thanks