Vue.js 传递来自不同模块的 $store 数据

Posted 2023-02-22

【中文标题】Vue.js 传递来自不同模块的 $store 数据

【英文标题】：Vue.js pass $store data from different modules

【发布时间】：2021-04-27 12:07:19

【问题描述】：

您好，我需要了解如何将一些 $store 值从 settings 模块“传递”到 header 模块，即由 settingsmodule 更新的 $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 用于选择货币和语言：

<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 模块之前呈现），因此货币和语言的价值不是还知道

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

【参考方案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>

在user 有一些数据之前，计算的currentLocaleImg 甚至不会触发，因此您可以避免错误。如有必要，对 currentCurrencyImg 执行相同操作。