Vuex 상태 변경으로 인해 구성 요소가 다시 렌더링되지 않음

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>

THE 값loggedIn조건부 렌더에 의존하는 것은 다음에서 변경된다.false로true사용자가 로그인한 경우.하지만, 그router-link사용자 이름 탐색 텍스트뿐만 아니라 항목도 표시되지 않는다.

왜 상점 상태의 변화는 이 경우에 항해봉의 갱신을 촉발하지 않는가?

변경 내용을 반영하려면 계산된 속성을 사용해야 한다.

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

      return {

      }
    },

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

참조URL: https://stackoverflow.com/questions/47459070/vuex-state-change-doesnt-make-component-re-render