如何使用从 API 获取的数据显示来自 VueX 的对象

Question

我正在尝试使用VueX 和来自 rapidapi 的免费 API 来显示数据。不知何故，我无法在组件中正确显示或遍历它。

控制台正确显示对象，但应该显示它的组件却没有。

我做错了什么？

以下是相关代码：

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来加载/重新加载数据。