Vue.js实战之使用Vuex + axios发送请求详解


Posted in Javascript onApril 04, 2017

前言

Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource

目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求

Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程

使用 cnpm 安装 axios

cnpm install axios -S

安装其他插件的时候,可以直接在 main.js 中引入并 Vue.use(),但是 axios 并不能 use,只能每个需要发送请求的组件中即时引入

为了解决这个问题,有两种开发思路,一是在引入 axios 之后,修改原型链,二是结合 Vuex,封装一个 aciton。具体的实施请往下看~

方案一:改写原型链

首先在 main.js 中引入 axios

import axios from 'axios'

这时候如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题

Vue.prototype.$ajax = axios

在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $ajax 命令

methods: {
 submitForm () {
 this.$ajax({
  method: 'post',
  url: '/user',
  data: {
  name: 'wise',
  info: 'wrong'
  }
 })
}

方案二:在 Vuex 中封装

之前的文章中用到过 Vuex 的 mutations,从结果上看,mutations 类似于事件,用于提交 Vuex 中的状态 state

action 和 mutations 也很类似,主要的区别在于,action 可以包含异步操作,而且可以通过 action 来提交 mutations

另外还有一个重要的区别:

mutations 有一个固有参数 state,接收的是 Vuex 中的 state 对象

action 也有一个固有参数 context,但是 context 是 state 的父级,包含  state、getters

Vuex 的仓库是 store.js,将 axios 引入,并在 action 添加新的方法

// store.js
import Vue from 'Vue'
import Vuex from 'vuex'

// 引入 axios
import axios from 'axios'

Vue.use(Vuex)

const store = new Vuex.Store({
 // 定义状态
 state: {
 test01: {
  name: 'Wise Wrong'
 },
 test02: {
  tell: '12312345678'
 }
 },
 actions: {
 // 封装一个 ajax 方法
 saveForm (context) {
  axios({
  method: 'post',
  url: '/user',
  data: context.state.test02
  })
 }
 }
})

export default store

注意:即使已经在 main.js 中引入了 axios,并改写了原型链,也无法在 store.js 中直接使用 $ajax 命令

换言之,这两种方案是相互独立的

在组件中发送请求的时候,需要使用 this.$store.dispatch 来分发

methods: {
 submitForm () {
 this.$store.dispatch('saveForm')
 }
}

submitForm 是绑定在组件上的一个方法,将触发 saveForm,从而通过 axios 向服务器发送请求

附:配置 axios

上面封装的方法中,使用了 axios 的三个配置项,实际上只有 url 是必须的。

为了方便,axios 还为每种方法起了别名,比如上面的 saveForm 方法等价于:

axios.post('/user', context.state.test02)

完整的请求还应当包括 .then 和 .catch

.then(function(res){
 console.log(res)
})
.catch(function(err){
 console.log(err)
})

当请求成功时,会执行 .then,否则执行 .catch

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
javascript中 try catch用法
Aug 16 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
javascript实现固定侧边栏
Feb 09 Javascript
Vue.js实战之组件的进阶
Apr 04 #Javascript
关于axios返回空对象的问题解决
Apr 04 #Javascript
jQuery自定义图片上传插件实例代码
Apr 04 #jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 #jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 #jQuery
JavaScript实现实时更新系统时间的实例代码
Apr 04 #Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 #jQuery
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
PHP静态成员变量
2017/02/14 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
JS实现简单日历特效
2020/01/03 Javascript
js实现动态时钟
2020/03/12 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
用Python实现KNN分类算法
2017/12/22 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
python实现内存监控系统
2021/03/07 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
大学新生军训自我鉴定
2014/03/18 职场文书
住宅质量保证书
2014/04/29 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
琅琊山导游词
2015/02/05 职场文书