How to display objects from VueX using fetched data from an 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>

It's a string. and as stated above, console is actually displaying the objects correctly in inspector. :) — Artvader
– Artvader, Commented Jun 18, 2020 at 3:00

Phil · Accepted Answer · 2020-06-18 03:16:48Z

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.

edited Jun 18, 2020 at 3:16

answered Jun 18, 2020 at 2:50

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Artvader Over a year ago

Thanks. But I'm getting a compile error with that solution. Something about unexpected token, expected "(" and pointing to loadWorldData^:. Apologies, I don't know the correct syntax for this one.

Phil Over a year ago

@Artvader I'd made some typos earlier. Please check again and make sure you're seeing the latest update to my answer

Artvader Over a year ago

Compiling correctly now. Although there's a console error saying Uncaught (in promise) TypeError: worldData.sort is not a function. I'm trying to figure it out. Thanks.

Phil Over a year ago

Ah sorry, I missed that the property was called response. I've fixed my answer now

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related