vue项目配置请求加载中效果

1.main.vue引入iview Spin组件

<Content class="content-wrapper">
     <Spin fix v-show="loading">
       <Icon type="ios-loading" size="18" class="spin-load">Icon>
       <div>加载中...div>
     Spin>
     <keep-alive>
       <router-view :key="$route.name">router-view>
     keep-alive>
   Content>
 Layout>
Content>


loading() {
  return this.$store.state.isLoading;
},

2.store定义isLoading状态

export default new Vuex.Store({
     
    state: {
     
        isLoading: false,
    },
    mutations: {
     
        updateLoading(state, loading) {
     
            state.isLoading = loading
        },
    }
})

3.post请求修改store中的值

/**
 * 自定义POST请求
 * @param {string} api 请求接口名称
 * @param {Object} param 参数对象
 */
const post = function(api, param, {
      showLoading = false } = {
     }) {
     
    return new Promise((resolve, reject) => {
     
            if (showLoading) {
     
                store.commit('updateLoading', true)
            }
            axios({
     
                method: 'post',
                url: url,
                data: reqData.data
            }).then(res => {
     
                if (showLoading) {
     
                    store.commit('updateLoading', false)
                }
                //doSomeThing...
            }).catch(err => {
     
                if (showLoading) {
     
                    store.commit('updateLoading', false)
                }
                //doSomeThing...
                reject(err);
            })
    })
}

4.在需要加载中样式的请求中配置

initData() {
     
      this.$post("api", this.params, {
      showLoading: true }).then(
        (res) => {
     
          //doSomeThing...
        }
      );
    },

5.效果