javascript - Vue中没有定义axios
问题描述
我正在尝试从 Wordpress API 获取数据。我的控制台向我抛出一个错误“未定义 axios”。这是我的 post.vue 组件。
<template>
<div>
<table class="table is-bordered">
<thead>
<tr>
<th>Title</th>
<th>Posted at</th>
</tr>
</thead>
<tbody>
<tr v-for="post in posts" :key="post.id">
<td>{{post.title.rendered}}</td>
<td>{{post.date_gmt}}</td>
</tr>
</tbody>
</table>
<pagination :pagination="pagination"
@prev="--postsData.page; getPosts();"
@next="postsData.page++; getPosts();">
</pagination>
</div>
</template>
<script>
import pagination from './pagination.vue'
export default {
mounted() {
this.getPosts();
},
components: {
'pagination': pagination
},
data() {
return {
postsUrl: 'http://localhost:8080/wp-json/wp/v2/posts',
posts: [],
postsData: {
per_page: 10,
page: 1
},
pagination: {
prevPage: '',
nextPage: '',
totalPages: '',
from: '',
to: '',
total: '',
},
}
},
methods: {
getPosts() {
axios
.get(this.postsUrl, {params: this.postsData})
.then((response) => {
this.posts = response;
this.configPagination(response.headers);
})
.catch( (error) => {
console.log(error);
});
},
configPagination(headers) {
this.pagination.total = +headers['x-wp-total'];
this.pagination.totalPages = +headers['x-wp-totalpages'];
this.pagination.from = this.pagination.total ? ((this.postsData.page - 1) * this.postsData.per_page) + 1 : ' ';
this.pagination.to = (this.postsData.page * this.postsData.per_page) > this.pagination.total ? this.pagination.total : this.postsData.page * this.postsData.per_page;
this.pagination.prevPage = this.postsData.page > 1 ? this.postsData.page : '';
this.pagination.nextPage = this.postsData.page < this.pagination.totalPages ? this.postsData.page + 1 : '';
}
}
}
</script>
我真的不知道这里出了什么问题,我安装了axios,npm install 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
这是有益的,因为:
- 当您需要更改时,您不必在 30 个位置更改基本 URL。
- 您不必在 axios 调用中一遍又一遍地添加相同的标头。
您可以在调用中使用较短的网址,如下所示:
API.get('foo/bar/') .then(response => { }
推荐阅读
- jquery - 如何使子 img 标签与父 div 一起可点击?
- powershell - 识别列表中不止一次存在的所有项目并将它们全部列出
- javascript - 如何将 CSS 效果转换为 Javascript / jQuery
- testing - Mocha,使用 this.skip() 动态跳过测试不起作用
- c++ - 执行 #ifdef 和 #ifndef 的 C++ 预处理器
- java - 可以用 LUA 脚本语言调用 Java JAR 文件吗?
- c# - 使用 WinSCP .NET 程序集在远程服务器上复制文件
- vb.net - 将事件添加到项目中的所有表单
- php - 如何使用 PHP 对图像进行分页?
- python - Python 堆栈跟踪解释 - 'NoneType' 对象不可迭代,但没有循环