Store undefined when accessing Vuex from VueRouter.beforeEach() - vue.js

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()
...
})

Answer 1

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;

Answer 2

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.

Answer 3

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()
})