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 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
详解基于webpack&gettext的前端多语言方案
Jan 29 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
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
PHP生成带有雪花背景的验证码
2006/10/09 PHP
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
python在文本开头插入一行的实例
2018/05/02 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
python 实用工具状态机transitions
2020/11/21 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
医院总经理岗位职责
2014/02/04 职场文书
财务部总监岗位职责
2014/03/12 职场文书
村抢险救灾方案
2014/05/09 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书