v- 탐색 모음에 반응하지 않는 경우

v- 탐색 모음에 반응하지 않는 경우

다음 템플릿이 있는 네비게이션바가 있습니다.

<nav v-bind:class="active" v-on:click>
 <v-btn v-on:click.prevent="signOut()" v-if="isLoggedIn">Sign Out</v-btn>
 <router-link v-on:click.native="makeActive('home')" to="/home" v-if="isLoggedIn" class="home">Home</router-link>
 <router-link v-on:click.native="makeActive('sign_up')" to="/sign_up" v-if="isLoggedIn" class="sign_up">Sign Up</router-link>
</nav>

보다시피 저는v-if지시.로그인 상태를 체크하고 있습니다.

isLoggedIn

    data () {
      return {
        active: 'home',
        isLoggedIn: this.$store.getters.isLoggedIn
      }
    }

이 값을 얻기 위해 vuex 스토어에서 읽고 있습니다.그러나 스토어 상태가 바뀌면 내 내비게이션이 반응적으로 업데이트되지 않고 대신 요소를 표시하거나 숨기려면 페이지를 새로 고쳐야 합니다.

VUEX 스토어

const state = {
  isLoggedIn: !!localStorage.getItem("token")
};

const getters = {
  isLoggedIn: state => {
    return state.isLoggedIn;
  }
}

const mutations = {
  [LOGIN] (state) {
    state.pending = true;
  },
  [LOGIN_SUCCESS] (state, response) {
    localStorage.setItem("token", response.data.jwt)
  },
  [LOGOUT](state) {
    localStorage.removeItem("token")
    state.isLoggedIn = false
  }
};

이 방법으로 인해 내비게이션이 반응적으로 업데이트되지 않는 이유는 무엇입니까?

위의 코멘트에서 Micael이 제안했듯이 Vuex 상태 속성을 반응적으로 동작시키려면 이를 계산된 속성으로 설정해야 합니다.Vuex 의 메뉴얼을 참조해 주세요.이 매뉴얼에서는 적절한 설명을 하고 있습니다.

예시로 돌아가서isLoggedIn다음 항목이어야 합니다.

computed: {
    isLoggedIn() {
      return this.$store.getters.isLoggedIn
    }
  }

언급URL : https://stackoverflow.com/questions/48757472/v-if-not-reactive-for-navigation-bar