v-如果对导航栏没有反应

Question

我有一个具有此模板的导航栏：

<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
  }
};

为什么这个方法没有使导航栏响应式更新

Answer 1

正如 Micael 在上面的评论中所建议的那样，要使 Vuex 状态属性表现出反应性，您需要将其设置为计算属性。请检查 Vuex 文档 here，其中有正确的解释。

回到你的例子，isLoggedIn应该是：

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

v-如果对导航栏没有反应

v-if not reactive for navigation bar

vue.js

vuex

reactive

VUEX 商店