Vue.js pass $store data from different modules

Hi I need to understand how to "pass" some $store values from settings module to header module, being the $store updated by settingsmodule

I have this app.vue module:

<template>    <v-app>      <router-view name="sidebar" />      <router-view name="header" :handleSettingsDrawer="handleSettingsDrawer" />      <v-main class="vue-content">        <v-fade-transition>          <router-view name="settings" />        </v-fade-transition>      </v-main>      <router-view name="footer" />      <app-settings-drawer        :handleDrawer="handleSettingsDrawer"        :drawer="settingsDrawer"      />    </v-app>  </template>  

in the <router-view name="header" /> there are a couple of v-menu to select currency and language:

<v-menu offset-y close-on-click>    <template v-slot:activator="{ on }">      <v-btn v-on="on" small fab class="mr-3">        <v-avatar size="30">          <v-img :src="currentLocaleImg"></v-img>        </v-avatar>      </v-btn>    </template>      <v-list dense class="langSel">      <v-list-item        v-for="(item, index) in langs"        :key="index"        @click="handleInternationalization(item.value,item.rtl)"      >        <v-list-item-avatar tile class="with-radius" size="25">          <v-img :src="item.img"></v-img>        </v-list-item-avatar>        <v-list-item-title></v-list-item-title>      </v-list-item>    </v-list>  </v-menu>  

in the script section I import the availableLanguages and availableCurrencies , I set them in data() where I also reference the user:

  data() {      return {        items: [          { icon: "settings", text: "Settings",link: "/settings" },          { icon: "account_balance_wallet", text: "Account", link:"/tos" },          { divider: true },          { icon: "login", text: "Log In",link:"/auth/login" },          { icon: "desktop_access_disabled", text: "Lock Screen",link:"/auth/lockscreen" },          { icon: "exit_to_app", text: "Logout",link:"/auth/logout" },        ],        langs: availableLocale,        currs: availableCurrency,        user: this.$store.state.userdata.user,      };    },  

then, in computed: I have the 2 functions that should get the current value of curr and lang:

currentLocaleImg()   {      return this.langs.find((item) => item.value === this.$store.state.userdata.user.locale).img;    },    currentCurrencyImg() {      return this.currs.find((itemc) => itemc.value === this.$store.state.userdata.user.currency).img;    }  }  

BUT the value of this.$store.state.userdata.user is updated firing the loadData() function mounted in the <router-view name="settings" /> module of App.vue

mounted(){      this.loadData();  },  methods:  {  async loadData(){    let jwt=sessionStorage.getItem('jwt');    try{        const res = await this.$http.post('/ajax/read_settings.php', {"jwt":jwt});        this.$store.dispatch("setUser", res.data.user);         this.$store.dispatch("setLocale", res.data.user.locale);        this.$store.dispatch("setCurrency", res.data.user.currency);      }  

the problem is that header module does not have the value of this.$store.state.userdata.user.locale (and .currency) and I get twice the following message:

    vue.runtime.esm.js:1888 TypeError: Cannot read property 'img' of undefined  

I do not know how to "pass" the data from one module to the other (or perhaps because the header is rendered before the settings module) and therefore the value of the currency and of the language are not known yet

What's wrong in this procedure? How can I fix it?

https://stackoverflow.com/questions/65855065/vue-js-pass-store-data-from-different-modules January 23, 2021 at 10:13AM