Как отображать объекты из VueX с использованием данных, полученных из API

Question

Я пытаюсь поэкспериментировать с отображением данных с помощью VueX и бесплатного API от Rapapi. Почему-то я не могу правильно отобразить или перебрать его в компоненте.

Консоль отображает объекты правильно, но компонент, который должен их отображать, не отображает.

Что я делаю не так ?

Вот соответствующие коды:

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

При создании магазина свойство state предназначено для начальных / значений по умолчанию. В настоящее время вы устанавливаете свой Promise, что, вероятно, не то, что вы хотите.

Выполнение асинхронных задач должно выполняться через actions, а результаты фиксируются через 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

Вы можете выполнить dispatch в любом месте в любое время для загрузки / перезагрузки данных.