加载具有vuex依赖项vueJS的视图背后的逻辑

Question

我有一个API调用，它加载到我的App.vue上，填充我的vuex存储的状态。App.vue默认加载一个Home.vue，它根据商店的状态显示图像。图像加载，但在填充状态之前会抛出许多控制台错误。一般来说，我不确定在VIEWS所依赖的数据完成加载之前延迟加载VIEWS的最佳逻辑是什么。现有的答案对组件来说是有意义的，但我不能将数据绑定到路由器视图，并且认为在params中传递数据没有意义。我是n00b。

//App.vue
<template>
<div id="app">
<div id="nav">
<div id="nav-logo"></div>
<div id="nav-links">
<router-link to="/">Home</router-link> 
<router-link to="/pokemon">Pokemon</router-link> 
</div>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
created(){
this.init();
},
methods:{
init(){
this.$store.dispatch('fetchPokemon', 'gen1');
}
}
}
</script>

//Home.vue
<template>
<div>
<div id="pokemonAFront">
<img :src="pokeImg[randomA].sprites.front_default" alt="">
</div>
<div id="pokemonABack">
<img :src="pokeImg[randomA].sprites.back_default" alt="">
</div>
</div>
</template>
<script>
export default {
data(){
return{
randomA: Math.floor(Math.random()* 20),
},
computed:{
pokeImg(){
return this.$store.state.pokemon
}
}
</script>

//store/index.js
state:{
pokemon:[]
},
mutations: {
SET_POKEMON(state, pokemon){
state.pokemon = pokemon;
}
},
actions: {
fetchPokemon(context, currentGen){
context.commit('SET_POKEMON', pokeData.fetchPokemon(currentGen)) //api call
}
}

当视图/组件的vuex依赖项尚未加载时，什么逻辑最适合延迟加载视图/组件？

Answer 1

最简单的方法是仅在从API填充pokeImg之后渲染dom：

<div v-if="pokeImg.length > 0">
<div id="pokemonAFront">
<img :src="pokeImg[randomA].sprites.front_default" alt="">
</div>
<div id="pokemonABack">
<img :src="pokeImg[randomA].sprites.back_default" alt="">
</div>
</div>