javascript - 当我通过路由器链接访问 URL 时，组件中的 Vue.js v-for 会呈现，但如果我手动键入 URL 或刷新页面，v-for 不会呈现

Question

我有一个非常简单的 View ，显示某个游戏中所有 Angular 色的图标。如果我要通过路由器链接访问显示该 View 的 URL，一切都会正常，并且我会看到图标，但是，如果我刷新页面，图标就会消失。

如果我手动输入 www.example.com/champions，它们也根本不会呈现。为什么会出现这种情况。

我的组件:

<template>
    <div class='wrapper'>
        <div class="champions-container">
            <div v-for='champion in champions' class="champion">
                <img class='responsive-image' :src="'http://ddragon.leagueoflegends.com/cdn/' + $store.getters.version + '/img/champion/' + champion.image.full" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                champions: this.$store.state.fullChampions
            }
        }
    }
</script>

还有我存储冠军的 Vuex 商店:

export default new Vuex.Store({
    state: {
        version: null,
        fullChampions: null
    },
    mutations: {
        version(state, data){
            state.version = data.version
        },
        fullChampions(state, data){
            state.fullChampions = data.fullChampions
        }
    },
    actions: {
        getVersion({commit}){
            return axios.get("http://ddragon.leagueoflegends.com/api/versions.json")
            .then((response) => {
                commit('version', {
                    version: response.data[0]
                })
            })
            .catch(function (error) {
                console.log(error);
            })
        },
        getFullChampions({commit, state}){
            return axios.get("https://ddragon.leagueoflegends.com/cdn/" + state.version + "/data/en_US/championFull.json")
            .then((response) => {
                commit('fullChampions', {
                    fullChampions: Object.values(response.data.data)
                })
            })
            .catch(function (error) {
                console.log(error);
            })
        },

Answer 1

这可能是由于您遇到的这些问题造成的。

第一:该组件不是在 vuex 中调度 getFullChampions 函数的组件，可能位于其他组件中。

第二是，您已经分配了冠军的值，其中状态 fullChampions 未更新。

this.champions: this.$store.state.fullChampions // state.fullChampions might not yet updated.

试试这个可能会对你有帮助

watch: {
      '$store.state.fullChampions': function() {
           this.champions = this.$store.state.fullChampions  
      },
}

最后是首先在 v-for 之上执行一个条件以防止该元素

<div class="champions-container" v-if=""$store.getters.version>
    <div v-for='champion in champions' class="champion">
        <img class='responsive-image' :src="'http://ddragon.leagueoflegends.com/cdn/' + $store.getters.version + '/img/champion/' + champion.image.full" alt="">
    </div>
</div>