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

Question

该应用程序是一个 Vue.js SPA。一旦启动，就会调度一个 Vuex 操作，向 JSON 文件发出 GET 请求，并将该 JSON 保存到名为 champions 的 Vuex 属性中。这些操作在主 App.vue 文件中调度:

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

这是我的商店:

export default new Vuex.Store({
    state: {
        champions: null
    },
    mutations: {
        champions(state, data){
            state.champions = data.champions
        }
    },
    actions: {
        getChampions({commit, state}){
            axios.get("https://ddragon.leagueoflegends.com/cdn/9.14.1/data/en_US/champion.json")
            .then((response) => {
                commit('champions', {
                    champions: response.data.data
                })
            })
            .catch(function (error) {
                console.log(error);
            })
        }
    }
})

现在我的实际问题来了。我有一个组件，它有一个数据属性 championsInfo: this.$store.state.champions 和一个循环遍历数组并找到具有特定 id 的冠军的函数:

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]
    }
}

现在，如果我先加载一个不同的组件，然后转到使用该功能的组件，一切正常，但是，如果我直接转到该组件，我会收到错误 "Error in render: "TypeError: Cannot convert undefined or null to object"" 我相信这是因为函数执行时的 championsInfo 属性因 GET 请求而为 null。遗憾的是，我不确定如何避免这种情况。

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

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

Answer 1

更新:

这里是固定版本的codesandbox:https://codesandbox.io/s/vue-template-eclk1

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

为什么您收到错误“无法将未定义或 null 转换为对象”？

当你的 App.vue 组件被渲染时......其模板中的组件也必须被渲染显然......所以你的子组件包含方法 findChampionName() 甚至在 championsInfo 可用之前就已呈现，所以您收到该错误的原因是 Object.entries(championsInfo) 抛出它导致 championsInfo 为空。

如何解决这个问题？

你只需要添加一个 v-if 到你的父组件标签中，条件是 $store.state.champions 所以只有当那个对象准备好了(available) 组件将被渲染

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