vue全局使用axios的方法实例详解
在vue项目开发中，我们使用axios进行ajax请求，很多人一开始使用axios的方式，会当成vue-resoure的使用方式来用，即在主入口文件引入import VueResource from 'vue-resource'之后，直接使用Vue.use(VueResource)之后即可将该插件全局引用了，所以axios这样使用的时候就报错了，很懵逼。
仔细看看文档，就知道axios 是一个基于 promise 的 HTTP 库，axios并没有install 方法，所以是不能使用vue.use()方法的。☞查看vue插件
那么难道我们要在每个文件都要来引用一次axios吗？多繁琐！！！解决方法有很多种：
1.结合 vue-axios使用
2.axios 改写为 Vue 的原型属性
3.结合 Vuex的action
1.结合 vue-axios使用
看了vue-axios的源码，它是按照vue插件的方式去写的。那么结合vue-axios，就可以去使用vue.use方法了
首先在主入口文件main.js中引用：
import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,axios);
之后就可以使用了，在组件文件中的methods里去使用了：
getNewsList(){
this.axios.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
}
2.axios 改写为 Vue 的原型属性（不推荐这样用）
首先在主入口文件main.js中引用，之后挂在vue的原型链上：
import axios from 'axios' Vue.prototype.$ajax= axios
在组件中使用：
this.$ajax.get('api/getNewsList')
.then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
3.结合 Vuex的action
在vuex的仓库文件store.js中引用，使用action添加方法
import Vue from 'Vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态
state: {
user: {
name: 'xiaoming'
}
},
actions: {
// 封装一个 ajax 方法
login (context) {
axios({
method: 'post',
url: '/user',
data: context.state.user
})
}
}
})
export default store
在组件中发送请求的时候，需要使用 this.$store.dispatch
methods: {
submitForm () {
this.$store.dispatch('login')
}
}
总结
以上所述是小编给大家介绍的vue全局使用axios的方法实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了如何通过Vue实现自定义视频和图片上传的功能，文中的示例代码简洁易懂，感兴趣的小伙伴可以跟随小编一起学习一下2023-04-04
vue中this.$refs.name.offsetHeight获取不到值问题
这篇文章主要介绍了vue中this.$refs.name.offsetHeight获取不到值问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家介绍了Vue3 构建 Web Components使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
基于vue.js轮播组件vue-awesome-swiper实现轮播图
一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper相似。接下来通过本文给大家详解讲解vue.js轮播组件vue-awesome-swiper实现轮播图实例代码，需要的朋友参考下2017-03-03
这篇文章主要介绍了vue项目打包步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
今天小编就为大家分享一篇vue+elementui 对话框取消 表单验证重置示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了关于vue路由监听事件跳转的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vue style width a href动态拼接问题的解决
这篇文章主要介绍了vue style width a href动态拼接问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程,需要的朋友可以参考下2018-10-10
本篇文章主要介绍了基于Vue2x的图片预览插件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论