Vue项目中使用Vuex + axios发送请求

　　本文是受多篇类似博文的影响写成的，内容也大致相同。无意抄袭，只是为了总结出一份自己的经验。　　

　　一直以来，在使用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))
}

Vue项目中使用Vuex + axios发送请求

相关推荐