前言

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。 对于需要发送请求的每个组件，只能立即部署。

为了解决这个问题，有两种开发构想。 一个是部署axios后修改原型链，另一个是与Vuex结合封装aciton。

方案一：改写原型链

首先在main.js中导入axios

import axios from 'axios '如果此时位于其他组件中，则axios命令不可用。 但是，将axios改写为Vue的原型属性可以解决这个问题

Vue.prototype.$ajax=axios将这两行代码添加到main.js后，就可以在组件的methods中直接使用$ajax命令了

方法：

提交表单()。

this.$ajax({ (

方法：开机自检，

URL : ' /用户'，

data: {

名称：“wise”，

info: 'wrong '

}

() )

在}

方案二：在 Vuex 中封装

之前的文章中，使用了Vuex的mutations。 因此，mutations类似于事件，用于改变Vuex的状态状态。

虽然操作和mutations也类似，但主要的区别在于，操作可以包含异步操作，并且可以通过操作提交mutations。

还有一个重要的区别：

mutations具有唯一的参数state，它接受Vuex中的state对象

虽然action也有自己的参数context，但context是包含state、getters在内的state的父代

Vuex的仓库是store.js，引入axios，向action添加新的方法。

//store.js

导入从' vue ' '

汇入vuex来源' vuex '

引入importaxiosfrom'axios'//axios

vue.use(vuex ) )。

const store=新vuex.store ({ (

//定义状态

状态：

test01: {

名称： ' wise wrong '

(、

test02: {

tell: '12312345678 '

}

(、

操作：

封装一个ajax方法

保存格式(上下文) {

axios({ (

方法：开机自检，

URL : ' /用户'，

data :上下文. state.test 02

() )

}

}

() )

导出默认存储注意事项：即使在main.js中引入了axios，并改写了原型链，也无法在store.js中直接使用$ajax命令。 也就是说，这两个方案相互独立。

在组件中发送请求时，必须使用this.$store.dispatch进行分发

方法：

提交表单()。

this.$ store.dispatch (保存表单) )。

}

}

附录：配置 axios

上述的打包方法使用了axios的3个构成项目，但实际上只需要url，完整的api可以参照使用说明。

为了方便起见，axios给每个方法取了别名。 例如，上面的saveForm方法与下面的相同。

axios.post('/user '，context.state.test02 )完整的请求还必须包括. then和. catch

. then (函数(RES ) )

控制台日志(RES )

() )

. catch (函数(err ) {

控制台日志(err )

} )如果请求成功，则执行. then，否则执行. catch。

这两个回调函数都有独立的范围，如果直接访问this，则无法访问Vue实例。

在这种情况下，只需要添加. bind(this )就可以解决这个问题。

. then (函数(RES ) )

控制台日志(this .数据) )。

. }.bind(this ) )