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实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
vue如何进行动画的封装
Sep 26 Javascript
JS实现图片拖拽交换效果
Nov 30 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 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
substr()函数中文版
2006/10/09 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
先进单位申报材料
2014/12/25 职场文书
2015年班组工作总结
2015/04/20 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL