VueRouter.beforeEach()에서 Vuex에 액세스할 때 저장소가 정의되지 않음

VueRouter.beforeEach()에서 Vuex에 액세스할 때 저장소가 정의되지 않음

Vuex 스토어에 접속하려고 합니다.이 문서는 다음과 같습니다.

간단한 오타가 될 거라고 확신하는 일로 아침을 허비했지만, 잊어버렸다.beforeEach() = > {} 본문에 "store is not defined"라고 표시됩니다.

Login Form 컴포넌트에서 스토어를 사용하고 있는데 있는 것 같습니다.크롬 디버거의 Vuex 탭에는 원하는 스토어 콘텐츠가 표시됩니다.내가 뭘 잘못하고 있지?

크리티컬 코드에서 컷 앤 페이스트:

src/srec/index.displacy

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

편집: 스토어에서 내보내기는 정상인 것 같습니다.가져온 저장소에 대한 로컬 참조를 유지하고 참조하면 작동합니다.before each()를 사용하는 것은 문맥상 맞는 것 같습니다.

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

매우 유사한 코드를 가지고 있으며, 유일하게 관련된 차이점은 다음과 같은 방법으로 router/index.js에 스토어를 Import한다는 것입니다.

import store from '@/store/index';

전체 router.js는 다음과 같습니다.

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;

이것은 가장 웅장한 꼬리 쫓기 운동이었다.문제는 Getter가 IsAuthenticated라고 불리지 않았다는 것입니다(또한 함수도 아닙니다).나는 내 디버거에 속아 넘어갔다.모든 코드를 원래 포스트로 되돌리고 getter 콜을 로 변경하다

맞아요.

const IsAuthenticated = store.getters.isAuthenticated

틀렸습니다

const IsAuthenticated = store.getters.IsAuthenticated()

Chrome에서는 해당 코드 라인에 브레이크 포인트를 두고 마우스를 코드 위에 올려놓고 'isAuthenticated' 검사를 시도하면 라인이 정상적으로 평가되더라도 원래 표시된 동작이 발생합니다.

저도 비슷한 사례가 있습니다.내 경우:

• 모듈 매장이 있습니다.따라서 에 Import된 모든 모듈은/store/index.js
• 라우터 상/router/index.js, 나는 스토어를 수입한다.
• 라우터 상에서 store getter를 사용하는 것이 좋습니다.

store/index.displaces

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

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

router/index.displaces

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

언급URL : https://stackoverflow.com/questions/48479390/store-undefined-when-accessing-vuex-from-vuerouter-beforeeach