페이지 새로 고침 없이 Vuex 상태가 업데이트되지 않음

페이지 새로 고침 없이 Vuex 상태가 업데이트되지 않음

나는 사용자들이 로그인했는지 여부에 따라 다른 페이지를 볼 수 있는 단일 페이지 애플리케이션을 만들고 있어.로그인 호출이 완벽하게 작동하고 인증 토큰이 Local Storage(로컬 스토리지)에 저장된다.

설정:나는 전화를 건 사람을 세웠다네loggedIn어느 쪽이 되느냐true주(州)에 토큰이 설정되어 있는 경우이게 바로 내 코드야auth.js스토어의 모듈:

const state = {
  accessToken: TokenService.getToken(),
}

const getters = {
  loggedIn: (state) => {
    return state.accessToken ? true : false
},

TokenService의 기능:

getToken() {
    return localStorage.getItem(TOKEN_KEY)
}

문제: 사용자가 로그인하면 토큰이 Local Storage(로컬 스토리지)에 올바르게 저장됨(볼 수 있음)그러나 DevTools의 Vuex 패널에 Getter가 표시됨loggedIn로서false그리고accessToken로서undefined. 페이지를 수동으로 새로 고칠 때 문제가 해결된다.그러면 그 가게는 제대로 인구가 차게 된다.

내가 뭘 잘못하고 있는 거지?가게가 반응해서 어떤 페이지나 다른 것을 보여줄 수 있어야 한다.loggedIn겟터터지다

로컬 스토리지는 반응형 데이터가 아니므로 변경 시 vuex 저장소에 알림을 받을 수 있는 방법이 없음.

앱이 로드될 때론getToken()맨 처음에 호출되며 사용자가 아직 로그인하지 않았으므로 반환됨undefined, 사용자가 로그인하면 로컬 스토리지가 업데이트되지만getToken()다신 전화 안 받아

BUT! 이제 로컬 스토리지에 데이터가 있으므로 페이지를 수동으로 새로 고칠 때getToken()부름을 받고 a를 돌려주다Truthy가치를 매기다

당신이 할 수 있는 것은 a를 쓰는 것이다.action갱신하다accessToken사용자가 로그인하면 호출한다.

이와 비슷한 것:

api.getToken(URL, userData).then((result) => {
   // if user is logged in successfully call the action
   if (result) this.$store.dispatch('auth/updateAccessToken');
})

나는 이전에 이 문제에 부딪힌 적이 있다.때로는 그것은 단지 Vue devtools가 신선하지 않은 경우일 뿐이다.그 주는 예상대로 업데이트 될 것 같다.당신 안에loggedIn함수, 콘솔 로깅 시도(예:

loggedIn: (state) => {
    console.log("token:", state.accessToken)
    return state.accessToken ? true : false
}

Vue devtools는 이런 일을 자주 하지 않는다.Devtool 창과 새로 고침 프레임을 마우스 오른쪽 버튼으로 클릭할 수 있다.상태를 업데이트하고 스스로 수정한다.짜증나긴 하지만

Edit(편집) 로컬 스토리지에서 토큰을 설정하는 것뿐만 아니라 인증이 성공할 때, 같은 시점에 액세스를 설정하는 돌연변이도 불러올 것이다.주의 토큰 속성.이미 가지고 있으므로 localStorage에서 매번 읽기 보다는 설정하십시오.로컬 스토리지에서 가져오는 작업은 사용자가 자동 복구되었는지 여부를 확인하기 위해 처음 로드할 때 수행하는 검사일 뿐이다.있는 경우 또는 일단 있는 경우 앱을 통해 해당 파일을 저장하여 해당 상태로 지정하고 액세스하십시오.

참조URL: https://stackoverflow.com/questions/65216436/vuex-state-does-not-update-without-a-page-refresh