Accessing to store in the router

Viewed 1989

I would like to check in my Vuex store whether a user has the 'admin' role before entering the /dashboard route. But I can't properly access data from store.getters.

I use Quasar (Vue.js) and Vuex + Typescript.

In the routes.ts file, on the beforeEnter() function, I can access getters from the store with a console.log(store.myStore.getters). Here I see userInfos inside:

enter image description here

I don't understand why I only get {} and not {...} (Note that if I click on it, I see its contents).

But if I call console.log(store.myStore.getters.userInfos), I don't see the data:

enter image description here

Here is index.ts (router):

import { route } from 'quasar/wrappers'
import VueRouter from 'vue-router'
import { Store } from 'vuex'
import { StateInterface } from '../store'
import routes from './routes'

export default route<Store<StateInterface>>(function ({ Vue }) {
  Vue.use(VueRouter)

  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,

    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

  return Router
})

Here is routes.ts (router):

import { RouteConfig } from 'vue-router'

const routes: RouteConfig[] = [
  {
    path: '/',
    component: () => import('layouts/Login.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: '/inscription', component: () => import('pages/SignUp.vue') },
      { path: '/connexion', component: () => import('pages/SignInPage.vue') }
    ]
  },

  {
    path: '/main',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: '/dashboard', component: () => import('pages/DashboardB2B.vue'),
          beforeEnter: (to, from, next) => {
            const store = require('../store')
            console.log("before enter")
            console.log(store.myStore.getters)
            return next();
        }, },
      {
        path: '/ajouter-un-referentiel',
        component: () => import('pages/ReferentielMetier.vue')
      },
      {
        path: '/init',
        component: () => import('components/bot/BotSkeleton.vue')
      }
    ]
  },
  {
    path: '/bot',
    component: () => import('layouts/Bot.vue'),
    children: [
      {
        path: '/ajouter-un-referentiel',
        component: () => import('pages/ReferentielMetier.vue')
      },
      {
        path: '/init',
        component: () => import('components/bot/BotSkeleton.vue')
      }
    ]
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes

And here is index.ts with the store (Vuex):

import Vue from 'vue'
import { store } from 'quasar/wrappers'
import Vuex from 'vuex'
Vue.use(Vuex)

import matching from './modules/matching'
import orga from './modules/organigrame'
import user from './modules/user'

export interface StateInterface {
  example: unknown
}

let myStore: any

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

  const Store = new Vuex.Store<StateInterface>({
    modules: {
      matching,
      orga,
      user
    },

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

  myStore = Store

  return Store
})

export {myStore}

EDIT: Looks like my console.log runs before the getters are loaded, because when I check out Vue developer tools, I see everything. How can I check the store if the store itself doesn't load before the beforeEnter function?

3 Answers

please try like this

store.myStore.getters["userInfos"]

I'm having exact issue, even if i use async/await :S

try this

router.beforeEach(async(to, from, next) => {
    const userInfo = await store.getters.userInfos;
    console.log(userInfo);
});
Related