vue3 multi language site, possible side effects with computed properties, dynamic components,

119 Views Asked by At

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?

0

There are 0 best solutions below