Vue.js Vuex状态更改不会发生'；不让组件重新渲染？

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

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

drac1
家
配置
你好，{{username}}
导出默认值{
名称：“topnavbar”，
数据（）{
console.log（this.$store.state.loggedIn）//按预期从false更改为true，并记录它。
返回{
用户名：此。$store.state.username，
loggedIn：这个。$store.state.loggedIn
}
}
}

当用户登录时，条件呈现所依赖的值

loggedIn

确实从

false

更改为

true

。但是，

路由器链接

项以及用户名导航文本从未显示

---

在这种情况下，为什么存储状态的更改不会触发导航栏的重新渲染

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

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

      return {

      }
    },

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

---

创建组件时，

数据

仅初始化一次。您需要一个计算的。我得到了警告

计算属性“username”被分配给了，但它没有setter。

之后，尽管如此？我应该在数据（）中以某种方式绑定它吗？因为在你的方式控制台抛出

计算属性“username”已分配给，但它没有setter。

您是否将其用作

v-model

？@cbll如果您将计算属性用作v-model，请将属性设置为：

username:{get（）{返回此值。$store.state.username}，set（value）{/*some mutation*/}