Vue.js 从不同模块传递 $store 数据

Question

嗨，我需要了解如何将一些 $store 值从 settings 模块“传递”到 header 模块，即由 settings 模块更新的 $store

我有这个 app.vue 模块：

<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>

在 <router-view name="header" /> 中有几个 v-menu 到 select 货币和语言：

<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>{{ item.text }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

在 script 部分中，我导入了 availableLanguages 和 availableCurrencies ，我将它们设置在 data() 中，我还引用了 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,
    };
  },

然后，在 computed: 中，我有两个函数应该获取 curr 和 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;
  }
}

但是 this.$store.state.userdata.user 的值被更新，触发安装在 App.vue

的 <router-view name="settings" /> 模块中的 loadData() 函数

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);

  }

问题是 header 模块没有 this.$store.state.userdata.user.locale 的值（和 .currency），我收到两次以下消息：

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

我不知道如何将数据从一个模块“传递”到另一个模块（或者可能是因为 header 在 settings 模块之前呈现）以及货币的价值和语言还不知道

这个过程有什么问题？我该如何解决？

Answer 1

存在争用情况，在这种情况下您尝试使用模板中尚未加载的数据。但首先，避免将商店数据直接设置到组件数据中，因为组件数据不会在商店更改时更新。替换为：

user: this.$store.state.userdata.user

经过计算：

computed: {
  user() {
    return this.$store.state.userdata.user;
  }
}

您可以使用 v-if 仅在某些数据可用时有条件地呈现：

<v-img :src="currentLocaleImg" v-if="user"></v-img>

currentLocaleImg 计算甚至不会触发，直到 user 有一些数据，这样你就可以避免错误。如有必要，对 currentCurrencyImg 执行相同的操作。

Vue.js 从不同模块传递 $store 数据

Vue.js pass $store data from different modules

vue.js

vue-router

axios

vuex