Vue.js는 서로 다른 모듈의 $store 데이터를 전달합니다.

Vue.js는 서로 다른 모듈의 $store 데이터를 전달합니다.

안녕하세요. $store 값 중 몇 가지를 "전달"하는 방법을 알고 싶습니다.settings로 모듈화하다.header모듈로,$store갱신자settings모듈

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

에서scriptImport하는 섹션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업데이트 되어 있습니다.loadData()에 탑재된 기능<router-view name="settings" />모듈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);

  }

문제는 말이다header모듈 값이 없습니다.this.$store.state.userdata.user.locale(그리고.currency)에서 다음 메시지가 두 배로 표시됩니다.

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

어떤 모듈에서 다른 모듈로 데이터를 '전달'하는 방법을 알지 못합니다(혹은header의 앞에 렌더링됩니다.settingsmodule)에 따라 통화와 언어의 가치는 아직 알려지지 않았다.

이 절차에서 뭐가 잘못됐나요?어떻게 하면 고칠 수 있죠?

아직 로드되지 않은 템플릿의 데이터를 사용하려고 하는 레이스 조건이 있습니다.그러나 먼저 저장소가 변경될 때 구성 요소 데이터가 업데이트되지 않으므로 저장소 데이터를 구성 요소 데이터로 직접 설정하지 마십시오.치환:

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>

그currentLocaleImgcomputed는 다음 시간까지 트리거되지 않습니다.user에 데이터가 있기 때문에 에러를 회피할 수 있습니다.에 대해서도 같은 처리를 실시합니다.currentCurrencyImg필요하면.

언급URL : https://stackoverflow.com/questions/65855065/vue-js-pass-store-data-from-different-modules