Vue component is not getting re-rendered/refreshed - vue.js

Question

I have a page header (Navbar) which has a [LOG IN] link and clicking it navigates to /login route. 'login' component shows a modal form and authenticates/login()s the user and after which route is set to Home page again. At this time the header's [LOG IN] should change to ["loggedinUser"], but it does not. Here is the code
(uses bootstrap-vue for css)
./App.vue
<template>
<component :is="layout">
<router-view :layout.sync="layout"/>
</component>
</template>
<script>
export default {
name: 'App',
data () {
return {
layout: 'div'
}
}
}
</script>
./components/BaseLayout.vue
<template>
<div>
<Header/>
<slot />
<Footer/>
</div>
</template>
<script>
import Header from './Header'
import Footer from './Footer'
export default {
name: 'BaseLayout',
props: [],
components: { Header, Footer },
methods: {}
}
</script>
The Navbar is rendered via this component.
./components/Header.vue
<template>
<b-navbar
type="dark"
variant="dark"
fixed="top"
class="text-monospace text-white"
>
<b-navbar-brand to="/">MyWebapp</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#" disabled>DISABLED</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-item to="/about">ABOUT</b-nav-item>
<header-user></header-user>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</template>
<script>
import HeaderUser from '#/components/HeaderUser.vue'
export default {
components: { HeaderUser }
}
</script>
"header-user" was earlier part of Header, but I made it a separate component.
./HeaderUser.vue
<template>
<div>
<b-nav-item
v-show="!isAuthenticated"
#click="signin"
>&lbbrk;LOG IN&rbbrk;
</b-nav-item>
<b-nav-item-dropdown
v-show="isAuthenticated"
>
<template slot="button-content">&lbbrk;{{ loggedinUser }}&rbbrk;</template>
<b-dropdown-item href="#" disabled>profile</b-dropdown-item>
<b-dropdown-item #click="signout">log off</b-dropdown-item>
</b-nav-item-dropdown>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'HeaderUser',
data () {
return {
authenticated: false
}
},
methods: {
...mapActions('user', ['logout']),
signin () {
this.$router.push('/login')
},
signout () {
// this.$store.dispatch('logout')
this.logout()
this.authenticated = false
this.$router.push('/landingpage')
}
},
computed: {
...mapGetters('user', ['isAuthenticated', 'getCurrentUser']),
loggedinUser: function () {
if (this.getCurrentUser) {
return this.getCurrentUser['name'].toUpperCase()
} else {
return null
}
}
}
}
</script>
Here is the login component
./pages/Login.vue
<template>
<div>
<b-modal
size="lg"
id="loginModal"
title="Credentials"
hide-footer
centered
no-close-on-backdrop
>
<b-form inline>
<b-input
class="mb-2 mr-sm-2 mb-sm-0"
id="usernameInput"
placeholder="Lab user id"
v-model="loginForm.user"
/>
<b-input
type="password"
id="passwordInput"
placeholder="Unikix domain password"
v-model="loginForm.password"
/>
<b-button #click="authenticate">Submit</b-button>
</b-form>
</b-modal>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: 'Login',
data () {
return {
loginForm: {
user: '',
password: '',
rememberChecked: ''
}
}
},
methods: {
...mapActions('user', ['login']),
authenticate () {
this.login(this.loginForm)
.then(() => {
this.$emit('authenticated', true) // But who's catching?
this.$router.push('/landingpage')
})
.catch(e => {
this.$router.push('/404')
})
},
},
mounted () {
this.$bvModal.show('loginModal')
}
}
</script>
Since Header and Login are separate components (no relationship), I am unable to communicate between them. After login is successful, and state has changed, Header is not aware of it and not reacting to it. the [LOG IN] remains unchanged.
How can I solve this?
(after log in is successful, if I reload the page in browser, Header is rendered with "loggedinUser" correctly.

Answer 1

Your store is there to share information between components.
Getters should be reactive by default, so your getter isAuthenticated should be reflected in all components when it changes, however it depends how you're writing your getters.
If you're adding properties to objects on the fly in your state, you need to use
Vue.Set/this.$set
Try and take a look at this example, it might help you out.
https://codesandbox.io/s/vuex-store-yhyj4