vue 项目中使用Loading组件的示例代码

var myplugin = {
install:function(Vue, options){
...
}
}

<template>
  <div id="app">
    <router-view></router-view>
    <loading v-if='LOADING'/> //自己封装的loading 组件
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

// store.js
const store = new Vuex.Store({
  state: {
    LOADING: false
  },
  mutations: {
    showLoading(state){
      state.LOADING = true  
    },
    hideLoading (state) {
      state.LOADING = false
    }
  }
})

import store from './store'

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

methods：{
  //通常请求都希望以异步的方式，方便数据操作
  async test(){
    this.$store.commit('showLoading')
    //这里需要将 axios 提前挂载到 Vue的属性上。
    await this.$axios.get('xxx/xxxx/xxx')
    this.$store.commit('hideLoading')
  }
}

<template>
  <div id="app">
    <router-view></router-view>
    <loading v-if='LOADING'/> //自己封装的loading 组件
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    computed:{
      ...mapState([
        'LOADING'
      ])
    },
    name: 'App'
  }
</script>

<template>
  <section>
    <div class='mock'>
      <div class='main'>
        loading...
      </div>
    </div>
  </section>
</template>  
<style>
  section{
    width:100vh;
    height:100vh;
    position:relative;
  }
  .mock{
    tion{
    width:100vh;
    height:100vh;
    position:absolute;
     z-index:100;
    background-color:#abb2bf;
  }
  .main{
    margin:200px auto;
    text-align:center:
  }
</style>