vue多页面项目使用全局Loading组件

多页面 vue 应用中，在请求接口之前统一加上 Loading 作为未请求到数据之前的过渡展示。
由于多页面未使用 vuex 做状态管理，只在入口统一注册了 bus，所以此例子使用 eventbus 做事件通信。

在 Loading.vue 中，一个简单的公共 loading 组件

这个 loading 组件用 showLoading 控制展示与否。

<template>
  <div class="loading" v-show="showLoading">
    <img/>
    <p> 加载中...</p>
  </div>
</template>

Loading.vue 中，用 bus 接收全局事件，控制组件的显示隐藏

用 SHOW_LOADING 和 HIDE_LOADING 事件控制组件的显示隐藏

<script>
import {Bus, SHOW_LOADING, HIDE_LOADING} from 'utils/bus'
export default {
  name: 'loading',
  data () {
    return {showLoading: false}
  },
  created () {this.loadingFn()
  },
  methods: {loadingFn () {Bus.$on(SHOW_LOADING, () => {this.showLoading = true})

      Bus.$on(HIDE_LOADING, () => {this.showLoading = false}
  },
}
</script>

ajax 请求中统一做处理

以 ajax 请求为例，可以在 beforeSend 和 complete 钩子函数中 emit 对应的隐藏和显示事件。

new Promise((resolve, reject) => {
    let defaultOpt = {
      url,
      type: config.method || 'POST',
      data: params || {},
      timeout: 50000,
      contentType: 'application/x-www-form-urlencoded',
      dataType: json
    }

    defaultOpt.beforeSend = (xhr, settings) => {if(config.setLoad){Bus.$emit(SHOW_LOADING)
      } else {Bus.$emit(HIDE_LOADING)
      }
    }

    defaultOpt.complete = () => {Bus.$emit(HIDE_LOADING)
    }

    $.ajax(defaultOpt)
  })

将 bus 注册在多页面的应用的 main.js 中

由于每个页面都有可能用到这个效果，这时候会在全局注册一些公共的组件，这样哪个页面需要用到，不需要重新引入，直接调用组件即可。

import Vue from 'vue'
import App from './App.vue'
import bus from 'utils/bus'
import components from 'utils/components.js'

// 注册统一的 bus 应用
Vue.prototype.$bus = bus
// 全局注册组件
Vue.use(components)

new Vue({render: h => h(App)
}).$mount('#app')

components.js 里放置需要全局注册的组件

import Loading from 'components/Loading.vue'
export default (Vue) => {Vue.component('Loading', Loading)，// 其他组件
}

额外需要注意的

用的时候直接引入到需要的页面即可。
但是会有一个小小的问题，假设某个页面在 created 里就要请求接口，这时候 Bus.$emit(SHOW_LOADING) 会无法被接收到。因为这时候 Loading 组件还未能加载完成，Bus.$on(SHOW_LOADING) 还未能注册上。所以，临时的解决方案是将请求先放在 mounted 钩子里。