vue技巧（五）通用loading组件

当我们调用一些耗时比较久的接口时，在页面上最好有个“锁定”的状态，防止在请求过程中用户重复发起请求或触发页面上的一些其它事件。下面是我们实际使用中的效果图：

 

该技术的实现主要是依赖自定义组件以及vuex的全局存储功能，实现流程如下：

1、首先是创建一个通用的组件Loading.vue

<template>
  <el-dialog
    title="提示"
    :visible.sync="requesting"
    width="30%"
  >
    <span>正在处理，请稍等...</span>
  </el-dialog>
</template>    

<script>
import {mapState} from 'vuex'

export default {
  name: "loading",
  computed:{
    ...mapState('loadingM',[
        'requesting'
    ])
  },
};
</script>

<style lang="scss" scoped>
</style>

2、其次是在vuex对应的js文件中增加Loading中使用的loadingM模块和requesting属性

import Vue from "vue"
import Vuex from 'vuex'

Vue.use(Vuex)

const loadingM = {
    namespaced: true,
    state: {
        requesting: false,
    },
    mutations: {
        showLoading(state){
            state.requesting = true    
        },
        hideLoading (state) {
            state.requesting = false
        }
    },
    getters: {
        getLoadState: state =>{
            return state.requesting
        }
    }
}

const createM = {
    namespaced: true,
    state: {

    },
    mutations: {

    },
    getters: {
        
    }
}

// store.js
const store = new Vuex.Store({
    modules: {
        loadingM,
        createM
    }
})

export default store

3、使用

使用时，首先是引入<Loading></Loading>组件，其次是在方法发起前调用vuex中方法使得Loading页面显示出来。

​​​​​​​this.$store.commit("loadingM/showLoading");

最后在方法的finally模块中关闭Loading页面

api.testFunc(param).then((res) => {
          
        }).catch((err) => {
          
        }).finally(() => {
          this.$store.commit("loadingM/hideLoading");
        });
}