Vue.js实战之使用Vuex + axios发送请求详解
前言
Vue原本有一个官方推荐的ajax插件vue-resource，但是自从Vue更新到2.0之后，官方就不再更新vue-resource
目前主流的Vue项目，都选择axios来完成ajax请求，而大型项目都会使用Vuex来管理数据，所以这篇博客将结合两者来发送请求
Vuex的安装将不再赘述，可以参考之前的Vue.js实战之Vuex的入门教程
使用cnpm安装axios
cnpminstallaxios-S
安装其他插件的时候，可以直接在main.js中引入并Vue.use()，但是axios并不能use，只能每个需要发送请求的组件中即时引入
为了解决这个问题，有两种开发思路，一是在引入axios之后，修改原型链，二是结合Vuex，封装一个aciton。具体的实施请往下看~
方案一：改写原型链
首先在main.js中引入axios
importaxiosfrom'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
importVuefrom'Vue'
importVuexfrom'vuex'
//引入axios
importaxiosfrom'axios'
Vue.use(Vuex)
conststore=newVuex.Store({
//定义状态
state:{
test01:{
name:'WiseWrong'
},
test02:{
tell:'12312345678'
}
},
actions:{
//封装一个ajax方法
saveForm(context){
axios({
method:'post',
url:'/user',
data:context.state.test02
})
}
}
})
exportdefaultstore
注意：即使已经在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
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。