时间戳

首页 > 解决方案 > 当我尝试从 API 加载数据并在多个组件中使用时，Vuex getter 有未定义的数据

javascript - 当我尝试从 API 加载数据并在多个组件中使用时，Vuex getter 有未定义的数据

问题描述

我有一个页面组件，我在其中进行 api 调用并通过操作将数据存储在 Vuex 存储中。这些数据必须在多个地方使用，但在任何地方我最初都会得到未定义的数据，这些数据会在几秒钟后从 API 异步加载。我应该如何异步使用 vuex getter？

这是我的 vuex 商店模块的代码：

import axios from 'axios';

const state = {
  all_pokemon: {},
  pokemon_details: {}
};

const getters = {
  getAllPokemon: function(state) {
    return state.all_pokemon;
  },
  getPokemonDetails: function(state) {
    return state.pokemon_details;
  }
};

const mutations = {
  setAllPokemon: function(state, payload) {
    return state.all_pokemon = payload;
  },
  setPokemon: function(state, payload) {
    console.log('Pokemon details set with payload ', payload);
    return state.pokemon_details = payload;
  }
};

const actions = {
  setPokemonAction: function({ commit }, passed_pokemon) {
    axios.get('https://pokeapi.co/api/v2/pokemon/' + passed_pokemon)
      .then((response) => {
        console.log('Response data is : ', response.data);
      });
    commit('setAllPokemon', response.data);
  },
  setPokemonDetailAction: function({ commit }, passed_pokemon) {
    console.log('Action method called..', passed_pokemon);
    axios.get('https://pokeapi.co/api/v2/pokemon/' + passed_pokemon)
      .then((response) => {
        commit('setPokemon', response.data);
      });
  }
};

export default {
  state,
  getters,
  mutations,
  actions,
};

以及我想要获取此数据并将其传递给其他组件的组件的代码：

<script>
  import { mapGetters, mapActions } from 'vuex'
  import axios from 'axios'

  // Imported other components here 

  export default {
    name: 'pokemon_detail_page',
    data() {
      return {
        current_pokemon: this.$route.params.pokemon,
        isLoading: false,
        childDataLoaded: false,
        search_pokemon: '',
        sprites: [],
        childData: 'False',
        isAdded: false,
        pokemon_added: 'none_display',
        show: false
      }
    },
    methods: {
      ...mapActions([
        'setPokemonDetailAction',
        'removePokemon'
      ]),
    },
    computed: {
      ...mapGetters([
        'getPokemonDetails',
        'getTeam'
      ])
    },
    components: {
      Game_index,
      PulseLoader,
      PokemonComponent,
    },
    filters: {

    },
    watch: {
      getTeam: function (val) {
      },
      getPokemonDetails: function(val) {
      }
    },

    created() {
      setTimeout(() => {
        this.show = true;
      }, 2000);
      this.$store.dispatch('setPokemonDetailAction', this.current_pokemon)
        .then(() => {
            // const { abilities, name, order, species,  } = {...this.getPokemonDetails};

        })
    },
    mounted() {

    },
  }
</script>

这是我将这些数据传递给多个组件的模板的代码：

       <div v-if="show" class="pokemon_stats_container" :key="childData">
            <ability-component
                    :abilities="getPokemonDetails.abilities"
            >
            </ability-component>

            <sprites-component
                    :sprites="sprites"
            >
            </sprites-component>

            <location-component
                    :location_area="getPokemonDetails.location_area_encounters"
                    :id="getPokemonDetails.id"
            >
            </location-component>

            <stats-component
                    :stats="getPokemonDetails.stats"
            >
            </stats-component>

            <game_index
                    :game_indices="getPokemonDetails.game_indices"
            />

            <moves-component
                    :moves="getPokemonDetails.moves"
                    :pokemon_name="getPokemonDetails.name"
            >
            </moves-component>

        </div>

到目前为止，我采用了一种迂回的方式，通过 setTimeout 并在 2 秒后设置一个变量，以便其他组件可以使用数据。但是，必须有一种更优雅的方式来处理 vuex 异步数据。有人请帮助我。

标签： javascriptvue.jsvuex

解决方案

你的第一次提交不在承诺中

 commit('setAllPokemon', response.data);

做这个：

  axios.get('https://pokeapi.co/api/v2/pokemon/' + passed_pokemon)
      .then((response) => {
        console.log('Response data is : ', response.data);
        commit('setAllPokemon', response.data);
      });

尝试在您的 vue 组件中使用

$forceUpdate()

当您的请求结束重新加载数据时

推荐阅读