vue全局使用axios插件請求ajax

vue全局使用axios插件請求ajax

Vue 原本有一個官方推薦的 ajax 插件 vue-resource，但是自從 Vue 更新到 2.0 之后，官方宣布停止更新vue-resource，並推薦大家使用axios，越來越多的 Vue 項目，都選擇 axios 來完成 ajax 請求，而大型項目會使用 Vuex 來管理數據。
之前一直使用的是 vue-resource插件，在主入口文件引入import VueResource from 'vue-resource'之后，直接使用Vue.use(VueResource)之后即可將該插件全局引用了；

Axios 是一個基於 promise 的 HTTP 庫，並沒有install方法，所以是不能使用vue.use()方法的。

使用 axios 訪問 API — Vue.js
https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

簡單點就是每個文件引用一次，import axios from 'axios';

全局使用的解決方法有很三種：
1.結合 vue-axios使用
2. axios 改寫為 Vue 的原型屬性
3.結合 Vuex的action

1.結合 vue-axios使用（個人感覺這種方法比較方便）
vue-axios是按照vue插件的方式寫的。結合vue-axios，可以去使用vue.use方法。
在主入口文件main.js中引用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);

之后就可以全局使用this.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
在組件中使用

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: 'zack'
    }
  },
  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')
  }
}

 

其實 Vue 和 axios 可以在一起配合的事情不只是訪問和展示一個 API。你也可以和 Serverless Function 通信，向一個有寫權限的 API 發送發布/編輯/刪除請求等等。由於這兩個庫的集成很簡單直接，它便成為了需要在工作流中集成 HTTP 客戶端的開發者的常見選擇。