Javascript Vuex状态属性设置为从GET请求响应。函数给出错误，因为所述属性显然为空

该应用程序是一个Vue.js SPA。一旦启动，就会调度一个Vuex操作，向JSON文件发出GET请求，并将该JSON保存到名为

champions

的Vuex属性中。这些操作将在主App.vue文件中调度：

<script>
    export default {
        mounted(){
            this.$store.dispatch('getChampions')
        }
    }
</script>

现在我真正的问题来了。我有一个组件，它有一个数据属性

championsInfo:this.$store.state.champions

，还有一个函数，可以在数组中循环并找到具有特定id的champion:

data(){
    return {
        championsInfo: this.$store.state.champions,
    }
},
methods: {
    findChampionName(id){
        let championId = id.toString();
        let champion = Object.entries(this.championsInfo).find(([key,value]) => value.key === championId);

        return champion[1]
    }
}

现在，如果我先加载一个不同的组件，然后转到使用该函数的组件，一切正常，但是，如果直接转到该组件，我会在render中得到一个错误：“TypeError:无法将未定义或null转换为object”我认为这是因为执行函数时的

championsInfo

属性由于GET请求而为空。可悲的是，我不知道如何避免这种情况

我也不确定这是否重要，但是，函数是这样使用的：

<img class='champion-icon' :src="'http://ddragon.leagueoflegends.com/cdn/9.13.1/img/champion/' + findChampionName(participant.championId).image.full" alt="">

---

更新：

以下是固定版本的代码沙盒：

在我的本地计算机上运行应用程序后，我发现您的代码包含以下问题：

为什么出现错误“无法将未定义或null转换为对象”

当呈现

App.vue

组件时，其模板中的组件也必须明显呈现…因此包含方法

findChampionName（）的子组件

甚至在

championsInfo

可用之前就已呈现，因此您获得该错误的原因是因为

对象。entries（championsInfo）

抛出它，因为

championsInfo

为空

如何解决此问题？

您只需将

v-if

添加到父对象内的组件标记中，条件为

$store.state.champions

，因此只有当该对象准备就绪（可用）时，才会呈现组件

<champion-comp v-if="$store.state.champions"></chmapion-comp>

遗憾的是，这似乎没有改变任何事情。不幸的是，我甚至不明白为什么，因为这些异步恶作剧让我难以置信。@Bobimaru将其应用于你的应用程序。。。如果您仍然收到错误回复，因为我还更改了

findChampionName（）

的输入，因为我没有

participant.championId

。您可以注意到我包含的模板上的更改这实际上起了作用，但只有一件事。用于为给定路径渲染匹配的组件，因此我必须添加这样的条件，但是，在我看来，通过这种方式，如果$store.state.champions为null，则可能无法渲染可能不需要$store.state.champions的组件。这是一个问题吗？@Bobimaru啊，我不知道你在使用

vue路由器

在这种情况下，只需从你的

标记中删除

v-if

，并将其放入根容器上的组件模板中，如：

…

<champion-comp v-if="$store.state.champions"></chmapion-comp>