How to update state in a component when the value changed at vuex store?
In your NotificationBarComponent.vue template:
<div> <div class="text-center" > <strong> {{ message }} </strong> </div></div>In your NotificationBarComponent.vue component definition add a prop to pass custom message to display and on mounted start the timeout to hide the notification:
export.default { props: ['message'], mounted() { window.setTimeout(() => { this.$store.commit('handleMessageState', false) }, 3000); } };in your store create a property to manage the notification display isNotificationBarDisplayed: false
handleMessageState(state, payload) { state.isNotificationBarDisplayed = payload;}anywhere you want to use it:
<notification-bar-component v-show="isNotificationBarDisplayed" message="Some message here"></notification-bar-component>computed: { isNotificationBarDisplayed () { return this.$store.state.isNotificationBarDisplayed; },}