vue全局使用axios的方法

vue全局使用axios的方法

1. 结合 vue-axios使用：

    首先在主入口文件main.js中引用：
   

   import axios from 'axios'
   import VueAxios from 'vue-axios'
    
   Vue.use(VueAxios,axios);
   

    之后就可以使用了，在组件文件中的methods里去使用了：
   

   
   getNewsList(){
    this.axios.get('api/getNewsList').then((response)=>{
      this.newsList=response.data.data;
    }).catch((response)=>{
      console.log(response);
    })
   
   

2. axios 改写为 Vue 的原型属性（不推荐这样用）：

    首先在主入口文件main.js中引用，之后挂在vue的原型链上：
   

   import axios from 'axios'
   Vue.prototype.$ajax= axios
   

    之后就可以使用了，在组件文件中的methods里去使用了：
   

   		this.$ajax.get('api/getNewsList')
   		.then((response)=>{
   		    this.newsList=response.data.data;
   		}).catch((response)=>{
   		    console.log(response);
   		})
   

3. 结合 Vuex的action 在vuex的仓库文件store.js中引用，使用action添加方法：

   import Vue from 'Vue'
   import Vuex from 'vuex'
    
   import axios from 'axios'
    
   Vue.use(Vuex)
   const store = new Vuex.Store({
     // 定义状态
     state: {
       user: {
         name: 'xiaoming'
       }
     },
     actions: {
       // 封装一个 ajax 方法
       login (context) {
         axios({
           method: 'post',
           url: '/user',
           data: context.state.user
         })
       }
     }
   })
    
   export default store
   

    在组件中发送请求的时候，需要使用 this.$store.dispatch
   

   methods: {
     submitForm () {
       this.$store.dispatch('login')
     }
   }