Nuxt.js无法从Django Rest Framework API检索数据

Question

我正在为我的Django Rest Framework后端开发Nuxt.js / Vue前端。即使我已指定允许未经身份验证的用户只读的权限，我似乎也无法从我的API成功加载数据。

Index.vue

import axios from 'axios'
export default {
  async asyncData({ $axios, params }) {
    try {
      let customers = await $axios.$get(`/customer/`);
      return { customers };
    } catch (e) {
      return { customers: [] };
    }
  },
  head() {
    return {
      title: "Customer list"
    };
  },
  components: {
  },
  data() {
    return {
      headers: [
        {text: 'Name', value: 'name',},
        {text: 'Address', value: 'address',},
        {text: 'City', value: 'city',},
        {text: 'Phone', value: 'phone_one',},
        {text: 'Email', value: 'email',},
      ],
      customers: [],
    };
  },
  methods: {
    deleteCustomer(customer_id) {
      console.log(deleted `${customer.id}`) 
    }
  }
};
</script>

Nuxt.config.js

module.exports = {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    baseURL: "http://localhost:8000/api"
  },
}

我已验证API正常运行，但是Vue中的客户数组始终为空。API位于http://localhost:8000/api/customer，以检索客户列表。

Answer 1

您无法在$axios功能中以asyncData的身份访问context。

只是您应该使用axios，如下所示：

await axios.get(`/customer/`);

在另一方面，使用$axios.$get()应该将injected作为全局上下文。

Answer 2

问题出现在三个地方。在两种情况下，语法错误。

第一return { customers};应该为return { customers: data };

第二删除客户：从data（）函数中声明[]。我想这是不必要的，因为asyncData仍然会覆盖数据，但是。有效。

第三将let customers = await $axios.$get( /客户/ );更改为const data = await $axios.$get(http://localhost:8000/api/customer/);

不必使用完整的URL，但我想确定。