I display the header and footer of a website with the help of vuex + vue-router + dynamic components. I fetch the current routes from vue-router via vuex and "inject" the data into App.vue, where I have my header and footer. I can console.log the correct routes of every page.
The app.vue markup looks like that:
<component :is="selectedHeader"></component>
<router-view></router-view>
<component :is="selectedFooter"></component>
Now I use the computed properties selectedFooter and selectedHeader in order to display the correct components:
computed: {
// eslint-disable-next-line vue/return-in-computed-property
selectedHeader() {
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.currentRoute = this.$store.getters.getRoute
if(this.currentRoute) {
if(this.currentRoute.includes("de")) {
return "de-header";
}
if(this.currentRoute.includes("en")) {
return "en-header";
}
if(this.currentRoute.includes("es")) {
return "es-header";
}
}},
// eslint-disable-next-line vue/return-in-computed-property
selectedFooter() {
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.currentRoute = this.$store.getters.getRoute
if(this.currentRoute) {
if(this.currentRoute.includes("de")) {
return "de-footer";
}
if(this.currentRoute.includes("en")) {
return "en-footer";
}
else if(this.currentRoute.includes("es")) {
return "es-footer";
}
}},
It pricipally works, but I think that I'm already experiencing side effects because I don't use the computed properties correctly, e.g. one route displays to the wrong language header, even though the route data from the store is definitely correct?
I guess that it would be better to use watchers, but how?