Vue 进阶(四):使用 Vuex + axios 发送请求
一、前言
Vue
原本有一个官方推荐的 ajax
插件 vue-resource
,但是自从 Vue
更新到 2.0
之后,官方就不再更新 vue-resource
。
目前主流的 Vue
项目,都选择 axios
来完成 ajax
请求,而大型项目都会使用 Vuex
来管理数据,所以这篇博客将结合两者来发送请求。
Vuex
安装将不再赘述,可以参考之前的博客《Vue进阶(五):与 Vuex 的第一次接触》。
二、axios
使用 cnpm
安装 axios
。
安装其他插件的时候,可以直接在 main.js
中引入并 Vue.use()
,但是 axios
并不能 use
,只能每个需要发送请求的组件中即时引入。
为了解决这个问题,有两种开发思路,一是在引入 axios
之后,修改原型链,二是结合 Vuex
,封装一个 aciton
。
2.1 改进方案一:改写原型链
首先在main.js
中引入 axios
。
这时候在其它的组件中,是无法使用 axios
命令的。但如果将 axios
改为 Vue
原型属性,就能解决这个问题。
在 main.js
中添加这两行代码之后,就能直接在组件的 methods
中使用 $ajax
命令
2.2 改进方案二: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
添加新的方法:
注意:即使已经在 main.js
中引入了 axios
,并改写了原型链,也无法在 store.js
中直接使用 $ajax
命令。换言之,这两种方案是相互独立的。
在组件中发送请求的时候,需要使用this.$store.dispatch
来分发。
submitForm
是绑定在组件上的一个方法,将触发 saveForm,从而通过 axios
向服务器发送请求。
三、配置 axios
上面封装的方法中,使用了 axios
的三个配置项,实际上只有 url
是必须的,完整的 api
可以参考使用说明。
为了方便,axios
还为每种方法起了别名,比如上面的 saveForm 方法等价于:
完整的请求还应当包括 .then
和 .catch
。
当请求成功时,会执行 .then
,否则执行 .catch
。
这两个回调函数都有各自独立的作用域,如果直接在里面访问 this
,无法访问到 Vue
实例。
这时只要添加一个.bind(this)
就能解决这个问题。
版权声明: 本文为 InfoQ 作者【华强】的原创文章。
原文链接:【http://xie.infoq.cn/article/df1e2ab10cea13bf124277fdd】。文章转载请联系作者。
评论