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 STORE

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-如果导航栏没有反应

VUEX STORE

1 个答案: