vue全局使用axios的方法实例详解

 更新时间:2018年11月22日 14:46:03   作者:CodeMan  
这篇文章主要介绍了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.js每天必学之表单控件绑定

    Vue.js每天必学之表单控件绑定

    Vue.js每天必学之表单控件绑定,如何在表单控件元素上创建双向数据绑定,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 一篇文章教你简单使用Vue的watch侦听器

    一篇文章教你简单使用Vue的watch侦听器

    这篇文章主要为大家介绍了Vue watch侦听器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • 5分钟学会Vue动画效果(小结)

    5分钟学会Vue动画效果(小结)

    这篇文章主要介绍了5分钟学会Vue动画效果(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 详解VUE中常用的几种import(模块、文件)引入方式

    详解VUE中常用的几种import(模块、文件)引入方式

    这篇文章主要介绍了详解VUE中常用的几种import(模块、文件)引入方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue预览图片和视频的几种实现方式

    Vue预览图片和视频的几种实现方式

    本文主要介绍了Vue预览图片和视频的几种实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue开发runtime core中的虚拟节点示例详解

    vue开发runtime core中的虚拟节点示例详解

    这篇文章主要为大家介绍了vue开发runtime core中的虚拟节点示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • vue中封装axios并实现api接口的统一管理

    vue中封装axios并实现api接口的统一管理

    这篇文章主要介绍了vue中封装axios并实现api接口的统一管理的方法,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-12-12
  • 浅析vue给不同环境配置不同打包命令

    浅析vue给不同环境配置不同打包命令

    本文分步骤给大家介绍vue给不同环境配置不同打包命令的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • Vue中Mustache引擎插值语法使用详解

    Vue中Mustache引擎插值语法使用详解

    在Vue中通过Mustache模板引擎将data中的文本数据插入到HTML中,下面这篇文章主要给大家介绍了关于Vue中Mustache模板引擎插值语法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue中自定义右键菜单插件

    vue中自定义右键菜单插件

    这篇文章主要为大家详细介绍了vue中自定义右键菜单插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论