axios 与 Vuex的使用

363 阅读1分钟
1.安装axios
    npm i axios -S
方案一:修改原型链
首先,在main.js中引入 import axios from 'axios'
还是无法在组件中使用axios的,但如果将vue改为vue的原型链,就可以le
Vue.prototype.$ajax=axios
开始发送请求
methods:{
   <!--不带参数的情况下-->
    lodeData(){
    this.$axjx.get(`url`)
      .then(function (res) {
        console.log(res);
        if(res.status==1){
        }
      }).catch(function (err) {
        console.log(err);
      });
    }
    <!--或者是-->
    lodeData2(){
    this.$axjx.post(`url`)
      .then(function (res) {
        console.log(res);
        if(res.status==1){
        }
      }).catch(function (err) {
        console.log(err);
      });
    }
    <!--带参数的情况下-->
    
}
如果想要发送带json格式参数的请求,则需要使用qs模块来处理参数
首先在main.js中导入qs模块 import qs from 'qs'
然后
Vue.prototype.$qs=qs
methods:{
    <!--带参数的情况下-->
     lodeData3(){
    this.$axjx.post(`url`,
        this.$qs.stringify({
            name:'useName'
        })
    ).then(function (res) {
        console.log(res);
        if(res.status==1){
        }
      }).catch(function (err) {
        console.log(err);
      });
    }
    
}
 注意:
 如果在vue中使用,那么vue中data中的数据无法通过this直接引用,需要做如下处理
 methods:{
    <!--带参数的情况下-->
     lodeData3(){
     var that = this(重点代码)
    this.$axjx.post(`url`,
        this.$qs.stringify({
            name:'useName'
        })
    ).then(function (res) {
        console.log(res);
        
        that.data=res.data(重点代码)
         console.log(that.data);
      }).catch(function (err) {
        console.log(err);
      });
    }
    
}