使用 Vue JS (Rapidapi) 时数据 API 未出现

Question

我正在学习如何在 VueJS 中使用 API。我在 Rapidapi.

上获取了开源 API 数据

我尝试使用 Postman 输入 link https://covid-19-data.p.rapidapi.com/report/country/name?name=Italy&date=2020-04-01，并得到了回复。

但是在VueJS中尝试时，数据没有出现。我的循环有没有遗漏？

这是我的代码的托管代码和框：https://codesandbox.io/s/nice-rain-45j6y

<template>
  <div v-for="post in posts" :key="post.id">
    {{ post.country }}
    {{ post.confirmed }}
  </div>
</template>

<script>
export default {
  data() {
     return {}
  },
  computed: {
    posts() {
        return this.$store.state.posts
    }
  },
  mounted() {
    this.$store.dispatch("loadPosts");
  }
};
</script>

import axios from 'axios'

const options = {
    method: 'GET',
    url: 'https://covid-19-data.p.rapidapi.com/country',
    params: {name: 'italy'},
    headers: {
      'x-rapidapi-key': '1031599022msh37c84da8c4e9b0ap1047d6jsn4d6475b64dc7',
      'x-rapidapi-host': 'covid-19-data.p.rapidapi.com'
    }
  };

const covid = {
    state: () => ({
      posts: []
    }),
    mutations:{
      setPosts(state, components){
         state.posts = posts
      }
    },
    actions: {
      loadPosts({ commit }) {
        axios.request(options)
        .then(response => {
            commit('setPosts', response.data)
            console.log(response.data)
        })
        .catch(function (error) {
            console.error(error);
        });
      }
    },

}

export default covid;

我的 console.log(response.data) 得到的回复如下

Answer 1

您似乎需要 API 密钥才能使用它。代码 401 表示未经授权，可能是因为您没有使用密钥。您可以获得 API 键并将其添加到查询参数中。您可以在此处阅读文档：

https://docs.rapidapi.com/docs/keys

https://example.p.rapidapi.com/?rapidapi-key=***************************

在你的情况下应该是这样的：

https://covid-19-data.p.rapidapi.com/report/country/name?name=Italy&date=2020-04-01&rapidapi-key=API_KEY_HERE

编辑如果你想在组件中使用状态，你需要导入它们。

import { mapState } from 'vuex';

export default{

computed: { ...mapState(['posts']) }
}

你可以对动作做同样的事情。 http://vuex.vuejs.org/guide/actions.html#dispatching-actions-in-components

Answer 2

多亏了你的codesandbox，我才能用这个正确显示它

<template>
  <div>
    <div v-for="post in posts" :key="post.longitude"> <!-- be careful here, you had a longatitude typo here -->
      <div>country: {{ post.country }}</div>
      <div>code: {{ post.code }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  computed: {
    posts() {
      return this.$store.state.covid.posts
    },
  },
  mounted() {
    this.$store.dispatch('loadPosts')
  },
}
</script>

主要错误实际上是在 covid.js 文件中

mutations: {
  setPosts(state, posts) { // was components here, but should be posts as the 2nd argument
    state.posts = posts;
  }
},

使用 Vue JS (Rapidapi) 时数据 API 未出现

Data API not appear using Vue JS (Rapidapi)

javascript

vue.js

axios

vuejs3

rapidapi