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/jquery对上传文件格式过滤的方法
Jul 25 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
JavaScript模块详解
Dec 18 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
vue二级路由设置方法
2018/02/09 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
Python程序中设置HTTP代理
2016/11/06 Python
python3操作mysql数据库的方法
2017/06/23 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
python制作图片缩略图
2019/04/30 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
校长寄语大全
2014/04/09 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
汽车转让协议书范本
2014/12/07 职场文书
2016猴年春节问候语
2015/11/11 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
工作自我评价范文
2019/03/21 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
Javascript webpack动态import
2022/04/19 Javascript
Python序列化模块JSON与Pickle
2022/06/05 Python
基于Python实现西西成语接龙小助手
2022/08/05 Golang