當同級組件更改時更新靜態 vue 組件中的元素

Question

這是我第一次提問，所以我希望我做對了。

我有一個項目，其中我的 App.vue 模板如下所示：

<template>
  <div id="app">
    <appheader></appheader>
    <router-view></router-view>
    <appfooter></appfooter>
  </div>
</template>

在我的<appheader>組件中，我有一個重定向到登錄頁面的登錄按鈕：

<router-link tag="div" to="/login">
   <a>
     <div class="signInButton">
       <div class="lockWrapper">
         <img class="lock" src="../assets/lock.svg" alt="">
       </div>
       <h4 class="loginText">Log in</h4>
     </div>
   </a>
</router-link>

我想要的是當用戶登錄時按鈕顯示“注銷”。當用戶登錄時，他們會得到一個 cookie，我用它來驗證用戶是否已登錄，但由於<appheader>不會重新加載，除非我刷新頁面，否則該值不會更改。 有沒有辦法在加載新組件時更新標題？

Answer 1

通過在一個組件中使用this.$root.$emit('event', data)並使用this.$root.$on('event', (data) => {})拾取事件，找到了一種解決方法this.$root.$emit('event', data) 。

這似乎可以更新標題組件，而不會出現任何問題。

Answer 2

現在你可以使用 Vuex 來存儲你的狀態。 更多信息： Vuex