How to display objects from VueX using fetched data from an API - api

Question

I'm trying to experiment on displaying data using VueX and a free API from rapidapi. Somehow I can't display or iterate through it properly in the component.
The console displays the objects correctly, but the component that's supposed to display it does not.
What am I doing wrong?
Here are the relevant codes:
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
worldData:
fetch("https://covid-193.p.rapidapi.com/statistics", {
method: "GET",
headers: {
"x-rapidapi-host": "covid-193.p.rapidapi.com",
"x-rapidapi-key": "mySecretKey"
}
})
.then(response => response.json())
.then(data => {
data.response.sort((a, b) => (a.country > b.country ? 1 : -1));
console.log(data.response);
return data.response;
})
},
getters: {
worldData: state => state.worldData,
},
mutations: {
},
actions: {
},
modules: {
}
})
components/mycomponent.vue
<template>
<div >
<div v-for="myData in $store.getters.worldData" :key="myData">{{myData}}</div>
</div>
</template>

Answer 1

When you create a store, the state property is for initial / default values. You are currently setting yours to a Promise which is probably not what you want.
Performing asynchronous tasks should be done via actions and the results committed through mutations.
const store = new Vuex.Store({
state: {
worldData: [] // initial value
},
getters: {
worldData: state => state.worldData
},
mutations: {
setWorldData: (state, worldData) => state.worldData = worldData
},
actions: {
loadWorldData: async ({ commit }) => {
// load the data via fetch
const res = await fetch('https://covid-193.p.rapidapi.com/statistics', {
headers: {
"x-rapidapi-host": "covid-193.p.rapidapi.com",
"x-rapidapi-key": "mySecretKey"
}
})
// check for a successful response
if (!res.ok) {
throw res
}
// parse the JSON response
const worldData = (await res.json()).response
// commit the new value via the "setWorldData" mutation
commit('setWorldData', worldData.sort((a, b) => a.country.localeCompare(b.country)))
}
}
})
store.dispatch('loadWorldData') // dispatch the action to load async data
export default store
You can execute the dispatch anywhere at any time to load / reload the data.