스토어 상태 업데이트 후 뷰가 업데이트되지 않는 이유는 무엇입니까?Vue js

스토어 상태 업데이트 후 뷰가 업데이트되지 않는 이유는 무엇입니까?Vue js

몇 주 전에 vue j를 사용하여 앱을 구축하기 시작했습니다.내가 하고 싶은 것은 사용자가 로그인하는 앱을 만드는 것이다.백엔드에서 얻은 토큰을 로컬 스토리지에 저장하는 기능으로 실행했는데, 이 기능은 토큰이 아직 유효한지 여부를 확인합니다.문제 없습니다. 완벽하게 작동합니다.그리고 vuex를 사용하여 앱 내 어디에서나 사용자의 상태(로그인 여부)를 확인할 수 있도록 하고 싶었습니다.몇 시간 동안이나 꼼짝도 못하고 있어요. 상태가 바뀐 후에도 뷰가 업데이트되지 않는 것 같아요.정확한 정보를 보려면 페이지를 새로 고쳐야 합니다.인터넷에서 이 문제를 찾아봤는데, vue가 있다는 것을 알고 있습니다.세트로 되어 있습니다만, 오브젝트에만 적용할 수 있는 것으로 알고 있습니다.

아래에 있는 코드를 찾아주세요: 말이 안 되는 것 같다는 것을 알고 있습니다.저는 단지 앱을 만들기 위해 많은 변수를 화면에 표시하고 있습니다.현재 토큰을 표시하고 있습니다.확인한 결과입니다.테스트를 위해서입니다.여기서의 문제는 상태가 변경되어도 업데이트되지 않지만 vuex를 사용하지 않을 때는 다음과 같이 계산된 속성과 메서드로 작동합니다.

내 컴포넌트에서는

<p>Current token : {{ tokenToCheck }}</p>
    <p>{{ isValid }}</p>
    <p>{{ loggedIn }}</p>
    <p> {{ test }} </p>
    <div class="alert alert-success" v-if="loggedIn"><p>You are logged in</p></div>

store.displaces를 설정합니다.

import Vue from 'vue'
import Vuex from 'vuex'
import jwt from 'jsonwebtoken'

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        tokenToCheck: localStorage.getItem('token'),
        isValid: 'test',
        isLogged: true
    }, 
    getters: {
        isLogged: (state) => {
            return state.isLogged; 
        }
    },
    mutations: {
        CHECK_TOKEN(state) {
            try{
                jwt.verify(state.tokenToCheck, 'RANDOM_TOKEN');
                state.isValid = 'ok';
                state.isLogged = true;
                return true;
            } catch(error) {
                console.log(error);
                console.log(state.tokenToCheck);
                console.log('erreur test token'); 
                state.isValid = "expiry"; 
                state.isLogged = false;
                return false;
            }
        }
    }
});

내 컴포넌트로 계산됨

export default {

  name: 'Home',
  data() {
    return {
      pseudo: '', 
      test: localStorage.getItem('token'), 
      password: '', 
      errorMessage:'',
      token: '',
      isAlert: false
    }
  },
  computed: {
    loggedIn() {
      return this.$store.getters.isLogged; 
    }, 
    isValid(){
      return this.$store.state.isValid;
    },
    tokenToCheck() {
      return this.$store.state.tokenToCHeck;
    }
  },
  mounted() {
    this.$store.commit('CHECK_TOKEN');
  },

Ps: 콘솔에 에러는 표시되지 않습니다.비밀키가 POST에 기재되어 있지 않습니다.

커밋은 메서드 또는 라이프 사이클훅 내부에서 트리거해야 하며 스토어 상태는 컴포넌트스크립트에서는 다음과 같이 계산 속성을 사용하여 취득할 것을 권장합니다.

computed:{
  loggedIn() {
      return this.$store.getters.isLogged; 
    },
  isValid(){
    return this.$store.state.isValid
   },
  getTokenToCheck(){
     return  this.$store.state.tokenToCheck
  }
},

mounted(){
this.$store.commit('CHECK_TOKEN') 
}

템플릿은 다음과 같습니다.

<p>Current token : {{ getTokenToCheck }}</p>
<p>{{isValid }}</p>
<p>{{ loggedIn }}</p>

<div class="alert alert-success" v-if="loggedIn"><p>You are logged in</p></div>

네, 관심 있는 분들을 위해:

vue-storage-watcher npm 플러그인을 사용했습니다.

효과가 있는 것처럼 보이지만, 경험이 많은 개발자가 다른 방법을 사용할 수 있다면 저는 아직 열려 있습니다.

다시한번 감사합니다.

언급URL : https://stackoverflow.com/questions/63658160/why-is-view-not-getting-updated-after-store-state-updates-vue-js