Update element in static vue component when sibling component changes

Question

This is my first time asking a question so I'm hoping I get this right.

I have a project where my App.vue template looks like this:

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

And in my <appheader> component i have a login button that redirects to the login page:

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

What I want is for the button to show "Log out" when the user is logged in. When the user logs in they get a cookie that i use to verify in components if a user has logged in or not, but since the <appheader> isn't reloaded, the value doesn't change unless I refresh the page. Is there a way to update the header whenever a new component is being loaded?

Answer 1

Found a work-around by using this.$root.$emit('event', data) in one component and picking up the event with this.$root.$on('event', (data) => {}) .

This seemed to update the header component without any problems.

Answer 2

For now you can use Vuex to store your state. for more info: Vuex