在模板/异步中显示 VueJS getter 数据

Question

在一个名为 GlobeInformation.vue 的 VueJS 组件中，我想调用一个 getter “mapData”，我希望它返回我的状态数据的操纵版本，但是当我在我的模板中显示它时它显示为一个空数组。我在下面发布了我的代码的精简相关版本。提前致谢。

PS：我想这是由于异步 API 调用而发生的，因此我尝试使用 v-if 条件来检查是否已收到数据，然后才将其呈现在模板上。

GlobeInformation.vue

<template>
<div class="information">
    <div v-if="mapDataLoaded">
        {{ mapInformation }}
    </div>
</div>
</template>
<script>
export default {
    data: function() { 
        return { 
            mapDataLoaded: false,
            mapInformation: []    
        }
    },
    computed: {
        ...mapGetters(['mapData'])
    },
    methods: {
        ...mapActions(['fetchCondensedDetails'])
    },
    async mounted() {
        await this.fetchCondensedDetails('/')
        this.mapInformation = await this.mapData
        this.mapDataLoaded = true
    }
}
</script>

getters.js

export default {
    mapData: state => {
        let mapData = []
        state.condensed.forEach(country => {
            mapData[country.alpha_2] = country.confirmed
        })
        return mapData
    }
}

actions.js

export default {
    async fetchCondensedDetails({ commit }, path) {
        try {
            if (path === '/') {
                const res = await fetch('https://covidapi.info/api/v1/global/latest')
                commit('SET_CONDENSED_DETAILS', await res.json())
            }
        } catch (err) {
            console.log(err)
        }
    }

}

mutations.js

export default {
    SET_CONDENSED_DETAILS: (state, data) => {
        data.result.forEach((element, index) => {
            const key = Object.keys(element)[0]

            let details = countries.find(country => {
                if (country.alpha_3 === key) return country
            })

            if (details) {
                state.condensed.push({
                    ...data.result[index][key],
                    alpha_3: key,
                    alpha_2: details.alpha_2,
                    name: details.name
                })
            }
        })
    }
}

Answer 1

我们看不到countries 的数据结构，所以这有点猜测，但只要您的数据正确唯一就应该可以工作。可以去掉mapInformation，直接在模板中使用getter：

<div v-if="mapDataLoaded">
  {{ mapData }}
</div>

将getter的mapData改为一个对象：

mapData: state => {
  let mapData = {}; // <-- object instead of array
  ...
}