vue全局使用axios的操作
在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入importVueResourcefrom'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中引用:
importaxiosfrom'axios' importVueAxiosfrom'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的原型链上:
importaxiosfrom'axios'
Vue.prototype.$ajax=axios
在组件中使用:
this.$ajax.get('api/getNewsList') .then((response)=>{ this.newsList=response.data.data; }).catch((response)=>{ console.log(response); })
结合Vuex的action
在vuex的仓库文件store.js中引用,使用action添加方法
importVuefrom'Vue' importVuexfrom'vuex' importaxiosfrom'axios' Vue.use(Vuex) conststore=newVuex.Store({ //定义状态 state:{ user:{ name:'xiaoming' } }, actions:{ //封装一个ajax方法 login(context){ axios({ method:'post', url:'/user', data:context.state.user }) } } }) exportdefaultstore
在组件中发送请求的时候,需要使用this.$store.dispatch
methods:{ submitForm(){ this.$store.dispatch('login') } }
补充知识:ElementUI在VUE中配置main.js与axios的关系
一、在main.js中:
importElementUIfrom'element-ui'
Vue.use(ElementUI)
二、在main.js中,数据请求axios不能在这里配置
以上这篇vue全局使用axios的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。