項目中loading效果的實現(主要用了iview-admin)~

作一個全局的loading，放在攔截器中，這樣就不用修改其餘的代碼或者vue中的引入。

第一步：在src/store/modules/app.js

state裏面定義一個全局的loading屬性,並初始化，例如：

isGlobalSpin: false, // 全局Loading

在mutations裏面定義去改變這個屬性的函數，例如：

changeGlobalSpin (state, show) {
            state.isGlobalSpin = show;
        },

第二步：在src/views/Main.vue裏面添加iview中的loading組件，加到<template><div>裏面，並自定義樣式等。例如

<Spin fix v-if="spinShow">
            <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
            <div>Loading</div>
        </Spin>

我直接用的官網的樣式

.demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }

而後定義spinShow函數決定是否顯示loading，寫在computed裏面

spinShow () {
                return this.$store.state.app.isGlobalSpin;
            }

第三步：添加攔截器，原本iview-admin中有一個axios.js(src/libs/axios.js),想着直接在這裏面的攔截器裏去寫，可是報錯，尚未找到怎麼處理BUG；只能先放在main.js(src/main.js)裏面新添加一個攔截器來實現。

別忘了引入axios

import axios from 'axios'

攔截器：

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    store.commit('changeGlobalSpin', true);
    return config;
}, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    store.commit('changeGlobalSpin', false);
    return response;
}, function (error) {
    // Do something with response error
    return Promise.reject(error);
});

最後一步：使用，直接在須要用到請求的頁面引入axios

import axios from 'axios'

// get一樣適用
axios.post("#", {}).then(function(response){console.log(response)}).catch(function(error){console.log(error)})