vue2.0 之 axios

一、下載axios

cnpm install axios --save-dev（npm install axios --save-dev）這裡的-dev：是上線過後還是需要使用的  --save-dev：是編輯時候需要使用的 

二、引入axios

import axios from 'axios'

三、使用axios

使用axios的兩種方式：

1.把axios寫在Vue的原型鏈中

Vue.prototype.$http = axios;

2.把axios封裝起來，用vuex來使用（vuex：就是全局變數，使其他子組件可以使用）

首先看整體的結構：

第一步：在需要請求數據的組件裡面通過store分發第一個dispatch：

 第二步：在main.js裡面引入vuex的文件夾store，並導出store

第三步：把axios封裝在api.js裡面：

api.js裡面的代碼：

import axios from 'axios'; //導入axios

axios.defaults.baseURL = '';  //後端藉口公共首碼
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

export function fetch(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, params)
            .then(response => {
                 alert('Api--ok');
                resolve(response.data);
            })
            .catch((error) => {
              console.log(error)
               reject(error)
            })
    })
}

export default {
  // 獲取我的頁面的後臺數據
  mineBaseMsgApi(url) {
     alert('進入api.js')
    return fetch(url);
  }
}

第四步：創建Vue文件夾，裡面包含index.js、type.js、actions.js、getter.js，以及文件夾modules：下麵包含不同模塊的mutations.js

第五步：store文件夾裡面首先進入的是index.js

import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex

Vue.use(Vuex);//實例化vuex

import mutations from './modules/mutations.js';
import actions from './actions.js';

export default new Vuex.Store({  //導出vuex裡面的組件
    modules:{
        mutations
    },
    actions
});

其次在types.js裡面導出一個自定義的常量，該常量是從調用數據的組件哪裡傳過來的：

在然後actions.js裡面引入type.js的常量，actions主要是用來把type.js的常量通過commit提交給mutations，也可以使用非同步操作：

modules/mutations.js裡面獲取到actions.js裡面提交上來的數據，改變狀態，並引入getters.js，getters.js就是可以把改變的數據緩存起來，在組件裡面可以用mapGetters 輔助函數獲取getters.js緩存的值：

getters.js

直到這裡整個過程就完成了。項目地址：https://github.com/hhhzzy/vuexAxios