在Vue中未定义Axios

我正在尝试从Wordpress API获取数据。我的控制台向我抛出错误“未定义轴”。这是我的post.vue组件。

我真的不知道这是怎么回事，我安装了axios，npm安装了axios，

这是我的main.js文件

import Vue from 'vue'
import App from './App.vue'
import posts from "./components/posts.vue";
import axios from "axios";
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

Vue.prototype.$axios = axios;

Vue.component('posts', posts);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

有人可以帮我吗？我看不到哪里错了？

谢谢你们

您需要添加import axios from 'axios'到组件。最好在您的src目录中创建一个名为api.js文件的配置文件，并添加以下内容：

import axios from 'axios';

export default axios.create({
    baseURL: `http://127.0.0.1:8000/`,
    headers: {
        'Content-Type': 'application/json',
        'Authorization': "JWT " + localStorage.getItem('token')
    },
    xsrfCookieName: 'csrftoken',
    xsrfHeaderName: 'X-CSRFToken',
    withCredentials: true
});

然后在组件中像这样导入：

import API from '../api'

并执行API.get而不是axios.get

这是有益的，因为：

当您需要更改基本URL时，不必在30个地方更改它。

您不必在axios调用中一遍又一遍地添加相同的标头。

您可以在通话中使用较短的网址，如下所示：

API.get('foo/bar/') .then(response => { }