vuex 지속 상태가 vue 라우터 탐색 가드와 함께 작동하지 않음

vuex 지속 상태가 vue 라우터 탐색 가드와 함께 작동하지 않음

추가했습니다.vuex-persistedstate문서에 정의된 바와 같이.(작업 및 작업)

export default new Vuex.Store({
    modules: {
        auth,
    },
    plugins: [VuexPersistedState()]
});

로그인 시 홈 페이지로 리디렉션하도록 라우터 탐색 가드를 설정했습니다.

/* Auth based route handler */
router.beforeEach((to, from, next) => {
    if (to.meta.hasOwnProperty('requiresAuth')) {
        if (to.meta.requiresAuth === true) {
            let isAuthenticated = authStore.getters.isAuthenticated
            if (isAuthenticated(authStore.state) === true) {
                next()
            } else {
                next({name: 'login'})
            }
        } else {
            let isAuthenticated = authStore.getters.isAuthenticated
            console.log(authStore.state)
            if (isAuthenticated(authStore.state) === true) {
                next({name: 'home'})
            } else {
                next()
            }
        }
    } else {
        next()
    }
})

vuex 지속 상태 복원 로컬 스토리지에서 저장소를 복원하지만 탐색 가드 이전에는 복원되지 않습니다!

나는 평가를 위해 소스 코드의 필요한 부분을 제공할 수 있습니다.필요에 따라 요청에 의견을 제시하십시오.실험적인 해결책도 환영합니다.이것은 저를 위한 개인 훈련 신청입니다!

도움을 주셔서 감사합니다!

저는 이것이 아마도 @Vaishnav에 쓸모가 없다는 것을 알고 있지만, 최근에 같은 토끼굴을 내려가지 않았기 때문에 저는 이 문제에 대한 해결책을 여기에 게시하기로 결정했습니다. 이 게시물이 이 문제를 구체적으로 묻는 유일한 게시물이었기 때문입니다.

당신의store/index.js함수와 저장소 개체를 모두 내보내야 합니다.

변경 내용:

export default() => {
  return new vuex.Store({
  namespaced: true,
  strict: debug,
    modules: {
      someMod 
    }, 
    plugins: [createPersistedState(persistedStateConfig)] 
  }); 
};

대상:

const storeObj = new vuex.Store({
  namespaced: true,
  strict: debug,
  modules: {
    someMod
  },
  plugins: [createPersistedState(persistedStateConfig)]
});

const store = () => {
  return storeObj;
};

export {store, storeObj}

또한 스토어를 내보내는 방법을 변경했으므로 스토어를 가져오는 방법도 변경해야 합니다.

앱에서 스토어를 가져온 모든 곳:main.js->import store from '@/store'을 제외하고router.js로 변경해야 합니다.import {store} from '@/store'

그리고 당신의 안에서router.js그저.import {storeObj} from '@/store'그리고 그것을 대신 사용합니다.store라우터 보호대에서:storeObj.getters['someMod/someValue']

저는 실용적인 예를 찾았습니다.

라우터가 구성 요소가 아니기 때문입니다.

라우터 구성 파일에서 -

import authStore from '@/stores/auth/store'

대신 -

import store from '@/store'

내비게이션 가드에서, 나는 교체했습니다.

let isAuthenticated = authStore.getters.isAuthenticated
if(isAuthenticated(authstore.state) === true){...}

-와 함께 -

let isAuthenticated = store.getters['auth/isAuthenticated']
if(isAuthenticated === true){...}

지금은 매력적으로 작용하고 있어요

언급URL : https://stackoverflow.com/questions/52800150/vuex-persisted-state-not-working-with-vue-router-navigation-guard