I am working with 2 vue files, header.vue and sidebar.vue. Both components are imported into layout.vue.
Here are the steps I am following:
1. Initially, when the page loads, I update the store in header.vue with some values inside the created hook.
2. In sidebar.vue, I have a specific functionality related to the store that needs to be executed once the store has a particular value (ppglink, which only comes after the store is updated from header).
Sidebar.vue:
<li class="nav-item">
<a class="nav-link" :href="ppgLink" target="_blank">
ppglink
</a>
</li>
mounted() {
this.ppgLink = this.$store.state.website.ppglink;
}
The ppgLink can be any link (e.g., www.google.com).
The ppgLink gets its value while the store is being updated in the created() of the header.vue. Sometimes ppgLink gets its value correctly (like when mounted in sidebar executes after created() finishes). However, in other cases, it may be undefined.
Is there a way to watch the store using a watcher in Vue file, similar to how we watch other variables, and update the ppg link once the store changes? Alternatively, can anyone suggest a correct method so that ppglink always gets its value, maybe by executing some lines of code in sidebar.vue once ppglink is updated in header.
I have looked at several answers on Stack Overflow, such as this one: vue.js 2 how to watch store values from vuex. However, I haven't found the right solution yet. Can someone please guide me in the right direction?