Vuexの状態を変更してもコンポーネントは再描画されませんか？

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