同级组件更改时更新静态Vue组件中的元素答案

【问题标题】：Update element in static vue component when sibling component changes同级组件更改时更新静态Vue组件中的元素
【发布时间】：2018-04-13 20:20:34
【问题描述】：

这是我第一次提出问题，所以我希望我做对了。

我有一个项目，其中我的 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，我使用该 cookie 在组件中验证用户是否已登录，但由于 <appheader> 没有重新加载，除非我刷新页面，否则该值不会改变。有没有办法在加载新组件时更新标头？

【问题讨论】：

标签： javascript vue.js components

【解决方案1】：

通过在一个组件中使用 this.$root.$emit('event', data) 并使用 this.$root.$on('event', (data) => {}) 获取事件来找到解决方法。

这似乎可以毫无问题地更新标头组件。

【讨论】：

【解决方案2】：

现在你可以使用 Vuex 来存储你的状态。欲了解更多信息：Vuex

【讨论】：