本文是受多篇类似博文的影响写成的，内容也大致相同。无意抄袭，只是为了总结出一份自己的经验。
一直以来，在使用Vue进行开发时，每当涉及到前后端交互都是在每个函数中单独的写代码，这样一来加大了工作量，二来代码零散复用度不高，修改时要多处修改，漏一处就出问题，三来满足于一种简单的方式不利于深入研究技术。现在做项目需要修改使用Vuex+axios发送请求的代码时，也是把原来的代码改为自己的“保留技术”，这样很不好，所以得研究一下如何在Vue项目中更好的与后台交互。
1、修改原型链的方案
// main.js
import axios from 'axios'; // 引入axios Vue.prototype.$ajax = axios; // 修改原型链 // componnentName.vue
methods: {
getData () {
this.$ajax.get('/user-list').then( res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
2、Vuex结合axios封装一个action的方案
// main.js
import store from './store/'; // 方案二：结合Vuex封装一个action new Vue({
el: '#app',
router,
store, // 方案二：结合Vuex封装一个action
components: { App },
template: '<App/>'
}) // store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from "axios"; Vue.use(Vuex); const store = new Vuex.Store({
state: { // 初始化数据，只要有可能的用到的最好都初始化
text: {name: 'xxx'},
data: {}
},
mutations: {
changeData (state, obj) { // store中的数据只能通过commit mutation来改变
state.data = obj
}
},
actions: {
// 封装一个ajax方法
saveForm (context) {
axios.get('./b2b/captcha/img-captcha'}, context.state.test).then(res => { // 调用接口
context.commit('changeData', res.data) // 通过接口获取的后台数据保存到store中，等待组件取用
})
}
}
}) export default store; // componentName.vue
computed: {
data () { // 获取store里的数据，放在computed中可以实时更新
return this.$store.state.data;
}
},
methods: {
getDataVuex () {
this.$store.dispatch('saveForm'); // 触发actions里的saveForm函数，调动接口
},
}
上述两种方案是相互独立的，也就是说，即使在main.js中引入了axios并修改了原型链，在store/index.js中也不能直接使用this.$ajax，而是要引入axios后再使用。
3、回调函数中的this指向问题
回调函数如果是箭头函数，那么箭头函数内部的this会自动获取所在上下文的this值，作为自己的this值。在Vue项目中，this会指向当前的组件实例。
data () {
return {
a: 123
}
},
methods: {
getDataVuex () {
this.$store.dispatch('saveForm').then(res => { // 回调函数是箭头函数
console.log(this.a); // --> 123
})
},
}
如果回调函数是普通函数，那么普通函数中this指向的不是组件实例，所以得进行一些处理才能让this指向当前的组件实例。
data () {
return {
a: 123
}
},
methods: {
getDataVuex () {
this.$store.dispatch('saveForm').then(function（res） { // 回调函数是普通函数
console.log(this.a); // --> Cannot read property 'msg' of undefined
})
},
}
// 解决方案如下：
getDataVuex () {
var _vm = this;
_vm.$store.dispatch('saveForm').then(function（res） { // 回调函数是普通函数
console.log(_vm.a); // --> 123
})
}
// 或：
getDataVuex () {
this.$store.dispatch('saveForm').then(function（res） { // 回调函数是普通函数
console.log(this.a); // --> 123
}.bind(this))
}