import http from 'vue-resource'

// 基于全局Vue对象使用http

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);

Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);

this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

// 定义初始值

const state = {

    isShowLoading: false

}

// 获取变量值

const getters = {

    isShowLoading: state => state.isShowLoading

}

//定义触发状态对象方法,传入state整个对象

//在页面中触发时使用this.$store.commit('mutationName') 触发Mutations方法改变state的值

const mutations = {

    setLoadingType(state, type) {

      state.isShowLoading = type;

    }

}

//异步执行方法，传入参数context，等同于整个store

//处理Mutations中已经写好的方法 其直接触发方式是 this.$store.dispatch(actionName)

const actions = {

    setLoadingType({commit}, type) {

        // 调用mutations 方法

        commit('setLoadingType', type)

    }

}

export default new Vuex.Store({

    state,

    mutations,

    actions,

    getters

})

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

import http from 'vue-resource'

import $ from 'jquery'

// 引入sotre.js

import store from './components/common/store.js'

Vue.config.productionTip = false

Vue.use(http)

Vue.http.interceptors.push((request, next) => {

	// 也可以再这里验证是否登录等操作

	// 显示loading

    store.dispatch('setLoadingType', true);

    next((response) => {

        // 隐藏loading

  	    store.dispatch('setLoadingType', false);

        return response

    });

});

/* eslint-disable no-new */

new Vue({

    store,

    el: '#app',

    router,

    render: h => h(App)

});

<template id="loading-template" class="loading">

  <div class="loading-overlay">

    <div class="sk-three-bounce">

      <div class="sk-child sk-bounce1"></div>

      <div class="sk-child sk-bounce2"></div>

      <div class="sk-child sk-bounce3"></div>

    </div>

  </div>

</template>

<script>

export default {

  name: 'loading',

  data () {

    return {

      msg: 'this.test uve'

    }

  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1, h2 {

  font-weight: normal;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

.loading-overlay {

  content: "";

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 1000;

  opacity: 1;

  background: rgba(0, 0, 0, 0.5);

  transition: all .6s;

}

</style>

<template>

    <div id="app">

        <div id="help">

            <loading v-show="isShowLoading"></loading>

        </div>

        <router-link to="/Login">跳转到详情页</router-link>

        <img src="./assets/logo.png">

        <router-view></router-view>

  </div>

</template>

<script>

import loading from './components/Loading'

import {mapGetters} from 'vuex'

export default {

    name: 'app',

    components:{

        loading

    },

    data () {

        return {

        }

    },

    //computed 实时计算 Vue检测到数据发生变动时就会执行对相应数据有引用的函数。

    computed: {

        ...mapGetters([

            'isShowLoading'

        ])

    }

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>