Store undefined when accessing Vuex from VueRouter.beforeEach()

Question

I am trying to access the Vuex store as shown in this article: here

I've wasted a good morning on what I am sure is going to be a simple typo, but It escapes me. Inside the beforeEach() => {} body, I get "store is not defined".

I am using the store from the LoginForm component, and it seems to be there. The Vuex tab in the chrome debugger shows the store contents that I expect. What am I doing incorrect?

Cut-n-paste from the critical code:

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import LoginForm from '@/components/LoginForm'
import HomePage from '@/components/HomePage'
import store from '@/store'

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path: '/login',
            component: LoginForm
        },
        {
            path: '/home',
            component: HomePage,
            meta: {requiresAuth: true}
        }
    ]
})

router.beforeEach((to, from, next) => {
    // store is undefined here
    const IsAuthenticated = store.getters.IsAuthenticated()
    if (to.matched.some(record => record.meta.requiresAuth) && !IsAuthenticated) {
        next({path: '/login', query: { redirect: to.fullPath }})
    } else {
        next()
    }
})

export default router

EDIT: The export from the store seems to be ok. By keeping a local reference to the imported store and referencing that, it works. Seems to be contextual in my use of beforeEach().

const lStore = store;
router.beforeEach((to, from, next) => {
    // store is undefined here, lStore is good to go
    const IsAuthenticated = lStore.getters.IsAuthenticated()
    ...
})

found a work around by storing a local reference. I'll edit my question. Props to paweloque for making me focus here. — Chris Lincoln, Jan 27 '18 at 22:03
In my case store does evaluate to undefined in Chrome tools when you debug, but actually when this code runs it finds store fine!, this probably some Chrome memory optimisation as this store should be wrapped into a closure — Serge, Nov 23 '19 at 06:32

paweloque · Answer 1 · 2018-01-27T21:51:26.110

3

I have a very similar code and the only relevant difference seems to be that I import the store the following way in router/index.js:

import store from '@/store/index';

My entire router.js is:

import Vue from 'vue';
import Router from 'vue-router';
import ProjectPage from '@/pages/ProjectPage';
import store from '@/store/index';


Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'ProjectPage',
      component: ProjectPage,
    },
  ],
});

router.beforeEach((to, from, next) => {
  // store is defined here
  console.log(store);
  debugger;
});


export default router;

edited Jan 27 '18 at 21:51

answered Jan 27 '18 at 20:36

paweloque

18,466
26
80
136

Thank you. Is that comment // store is undefined here a cut-n-paste from my code or are you confirming that it is also not defined in your example? – Chris Lincoln Jan 27 '18 at 21:07
that's a cut and paste. In my case with this import, the store is defined at this point... sorry for the confusion – paweloque Jan 27 '18 at 21:50
Do I have something bungled on the store/index.js export I wonder? – Chris Lincoln Jan 27 '18 at 21:55
Just import @/store/index, currently you only import @/store – paweloque Jan 27 '18 at 22:13
I have a similar issue, and I have imported the store. Yet, "this" is undefined in my getter. If I can't access "this" from the getter, how can I access the store? – Chris Jan 16 '19 at 22:13

Chris Lincoln · Answer 2 · 2018-01-28T10:27:15.073

This was a tail-chasing exercise in the grandest. The problem was that my getter was not called "IsAuthenticated" (and it also wasn't a function). I allowed myself to get duped by my debugger. Restoring all code back to the original post and changing the getter call to

correct

const IsAuthenticated = store.getters.isAuthenticated

incorrect

const IsAuthenticated = store.getters.IsAuthenticated()

In Chrome, putting a breakpoint on that line of code and attempting to inspect 'isAuthenticated' by hovering your mouse over the code yields the original indicated behavior, even though the line evaluates fine.

score 0 · Answer 3 · answered Mar 25 '20 at 01:56

I also have similar case. On my case:

I have store with modules. So all modules imported on /store/index.js
On router /router/index.js, I import the store
and then use store getter on router work well

store/index.js

...
import auth from './modules/auth'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    auth
  }
})

router/index.js

...
import store from '../store/index.js'
...
router.beforeEach(async (to, from, next) => {
  console.log(store.getters['auth/isAuthenticated'])
  next()
})

Store undefined when accessing Vuex from VueRouter.beforeEach()

3 Answers3