Question

我有一个导航栏，根据身份验证具有条件渲染：

<template>
  <div id="routing">
    <b-navbar variant="light" type="light">
      <b-navbar-brand>
        <img id="drage" src="../assets/icon.svg"/>
        <b-nav-text id="txt">
          drac1
        </b-nav-text>
        <div v-if="loggedIn === true">
          <router-link id="link" to="/" exact>
            Home
          </router-link>
          <router-link id="link" to="configuration" exact>
            Config
          </router-link>
          <b-nav-text id="hellotext">
            Hello, {{ username }}
          </b-nav-text>
        </div>
      </b-navbar-brand>
    </b-navbar>
  </div>
</template>

<script>
  export default {
    name: 'topnavbar',
    data () {
      console.log(this.$store.state.loggedIn) // Changes from false to true as it is supposed to, and logs it. 
      return {
        username: this.$store.state.username,
        loggedIn: this.$store.state.loggedIn
      }
    }
  }
</script>

当用户登录时，条件渲染所依赖的值loggedIn确实从false更改为true。但是，router-link项以及用户名导航文字永远不会显示。

为什么在这种情况下，商店状态的更改不会触发重新呈现导航栏？

Answer 1

您使用错误，为了反映更改您需要使用计算属性：

 export default {
    name: 'topnavbar',
    data () {

      return {

      }
    },

    computed: {
        username(){
            return  this.$store.state.username
        },
        loggedIn(){
            return  this.$store.state.loggedIn
        }
    }
  }

Vuex状态更改不会使组件重新渲染？

1 个答案: