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 相关文章推荐
js中arguments的用法(实例讲解)
Nov 30 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
老生常谈JQuery data方法的使用
Sep 09 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 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
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
Python模拟登陆实现代码
2017/06/14 Python
python实现kMeans算法
2017/12/21 Python
python删除过期log文件操作实例解析
2018/01/31 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
python处理“
2019/06/10 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
中学实习教师自我鉴定
2013/12/12 职场文书
新学期校长寄语
2014/01/18 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
党支部意见范文
2015/06/02 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫