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 相关文章推荐
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
JS中的三个循环小结
Jun 20 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
js实现rem自动匹配计算font-size的示例
Nov 18 Javascript
Vue隐藏显示、只读实例代码
Jul 18 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
改造一台复古桌面收音机
2021/03/02 无线电
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
JavaScript 事件入门知识
2015/04/13 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python中的常量和变量代码详解
2018/07/25 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
影视艺术学院毕业生自荐信
2013/11/13 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
工程招投标邀请书
2014/01/26 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
党员年度个人总结
2015/02/14 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL