Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource
目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求
前言:
Vuex 的安装将不再赘述,可以参考之前的博客 Vue 爬坑之路(四)—— 与 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.jsimport 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 是必须的,完整的 api 可以参考使用说明
为了方便,axios 还为每种方法起了别名,比如上面的 saveForm 方法等价于:
axios.post('/user', context.state.test02)
完整的请求还应当包括 .then 和 .catch
.then(function(res){console.log(res) }) .catch(function(err){console.log(err) })
当请求成功时,会执行 .then,否则执行 .catch
这两个回调函数都有各自独立的作用域,如果直接在里面访问 this,无法访问到 Vue 实例
这时只要添加一个 .bind(this) 就能解决这个问题
.then(function(res){console.log(this.data) }.bind(this))
转载于:https://www.cnblogs.com/wisewrong/p/6402183.html
Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求相关推荐
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https: ...
- (转)Vue 爬坑之路(四)—— 与 Vuex 的第一次接触
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...
- Vue 爬坑之路(四)—— 与 Vuex 的第一次接触
2019独角兽企业重金招聘Python工程师标准>>> 在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 htt ...
- Vue 爬坑之路(十)—— Vue2.5 + Typescript 构建项目
Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 P ...
- vue爬坑之路2----vue实例
构造器 每个vue.js应用都是通过构造函数Vue穿件一个Vue的根实例启动的: var vm = new Vue({ //选项 }) 在实例化Vue时,需要传入一个选项对象,他可以包含数据,模板,挂 ...
- Vue爬坑之路 二:使用Muse-UI前端框架及axios,实现简单登录页
一:安装UI组件 二:创建基本的vue组件 三:使用axios与后台进行数据交互 1:安装axios 2:axios登录的实现 一:安装UI组件 Muse UI 基于 Vue2.0 开发,Vue2.0 ...
- React爬坑之路二:Router+Redux
上一篇写了Antd和Axios的基本操作 之前大标题到五了那么这篇从六开始 ST也是初学小白可能讲的完全不对 大家当做小说随便读读消遣一下就好 React官网:https://reactjs.org/ ...
- React爬坑之路三:Dva
前两篇写了react各种基本操作和主要概念 但其实没必要那么复杂直接用框架就好啦 这年头前端框架真是一睁眼就多出好几个 傻瓜级教程写的不合理的地方请批评指正 React官网:https://react ...
- Django实现一个简单的中间件,不熟悉中间件的爬坑之路
1.在之前,写过一篇文章,自定义一个简单的中间件,文章链接如下:https://blog.csdn.net/u012561176/article/details/84024073 后面,发现还是有问题 ...
最新文章
- electron版本的串口调度助手
- python 网页自动处理_推荐一款 10 行 Python 代码实现网页自动化工具
- PHP Ueditor 富文本编辑器
- python教程5小时完整版_Python零基础入门教程5小时完整版(北京理工大2020年版)
- 编译gcc4.4.6与ICE遇到的几个问题
- 【收藏】从 0 到 1 学习 elasticsearch ,这一篇就够了!
- superset可视化-Pie Chart(圆饼图)
- n76e885_新唐N76E003,N76E616烧录,调试各种问题集【坑集】
- 兼容各种浏览器的自动左右滚动兼左右点击滚动代码
- Redis悲观锁、乐观锁和调用Lua脚本的优缺点
- 自测目标 题库进度 0929
- 搜索引擎、相关性算法的测试
- OpenCV3学习(8.3)模板匹配函数matchTemplate详解
- iPhone和Android的区别,从警示框看iPhone与Android的区别
- java rtti_java对RTTI的所有需要
- Struts与Servlet的冲突
- 赛锐信息:SAP实施中最常见的安全挑战
- Strusts2笔记6--拦截器
- 电脑下载的准考证去哪里了
- 微博三方登陆原理讲解
热门文章
- 有向图最小路径覆盖方法浅析、证明 //hdu 3861
- linux下apache+php+mysql升级安装过程
- ffmpeg 解码rtp方法
- 技巧|利用 Python 实现多任务进程
- mysql+dump+选项_mysqldump 备份常用选项以及备份脚本
- 【Unity】修改UGUI Minimap(2.2.5)的显示范围(min,max)
- HDU3342拓扑排序
- vivo是安卓手机吗_vivo手机更新安卓9.0!4款产品尝鲜:有你的吗?
- 信阳学院大一计算机考试题库,韩山师范学院大一计算机考试题库网页制作的试题...
- mysql另外加外键约束怎么写_mysql外键约束怎么写