vue全局使用axios的操作


Posted in Javascript onSeptember 08, 2020

在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);
})

结合 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')
 }
}

补充知识:ElementUI 在VUE中配置 main.js与axios的关系

一、在main.js中:

import ElementUI from 'element-ui'

Vue.use(ElementUI)

二、在main.js中,数据请求axios不能在这里配置

以上这篇vue全局使用axios的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
js实现微信聊天效果
Aug 09 Javascript
vue实现下拉菜单树
Oct 22 Javascript
Vue自定义多选组件使用详解
Sep 08 #Javascript
vue项目中微信登录的实现操作
Sep 08 #Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 #Javascript
快速解决element的autofocus失效问题
Sep 08 #Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 #Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 #Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 #Javascript
You might like
php中一个完整表单处理实现代码
2011/11/10 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
采用call方式实现js继承
2014/05/20 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
python中下标和切片的使用方法解析
2019/08/27 Python
python提取xml里面的链接源码详解
2019/10/15 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
小区门卫岗位职责
2013/12/31 职场文书
运动会加油口号
2014/06/07 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
接待员岗位职责范本
2015/04/15 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL