vue加载loading图

APP.vue

<template>
  <div id="app">
    <loading v-if=‘loading‘></loading>
    <router-view/>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Loading from "./components/loading";
import "./assets/css/reset.css";
export default {
  name: "App",
  data() {
    return {

    };
  },
  mounted() {
  },
  computed:{
        ...mapState([
            ‘loading‘
        ])
   },
  components: {
    Loading
  }
};
</script>

loading.vue 组件

<template>
  <div class="loading">
    <img src="../assets/img/image/loading.gif">
  </div>
</template>

<script>
export default {
  name: "loading",
  data() {
    return {};
  },
  methods:{
  }
};
</script>

<style>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 121;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading img {
  margin: 5rem auto;
  width: 200px;
  z-index: 999;
}
</style>

vuex中store.js

import Vue from ‘vue‘;
import Vuex from ‘vuex‘;

Vue.use(Vuex);
const state = {
    loading: false
    // 请求数据时加载状态loading
}
const getters = {

}
const actions = {

}
const mutations = {
    // 请求数据时loading
    showLoading(state){
        state.loading = true
    },
    hideLoading (state) {
        state.loading = false
    }
}
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations
});

http.js (公用的请求数据)

/*
  接口处理函数
  这个函数每个项目都是不一样的，我现在调整的是适用于
  https://cnodejs.org/api/v1 的接口，如果是其他接口
  需要根据接口的参数进行调整。参考说明文档地址：
  https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
  主要是，不同的接口的成功标识和失败提示是不一致的。
  另外，不同的项目的处理方法也是不一致的，这里出错就是简单的alert
*/
function apiAxios (method, url, params, success, failure,error) {
  url_check()
  store.commit(‘showLoading‘)    /**loading请求**/
  axios({
    method: method,
    url: url,
    data: method === ‘POST‘ || method === ‘PUT‘ ? params : null,
    params: method === ‘GET‘ || method === ‘DELETE‘ ? params : null,
    baseURL: root,
    withCredentials: true,
    headers:{
        ‘token‘:store.state.token
    }
  })
  .then(function (res) {
       console.log(res.data);
      if(res.data.code== 0) { if (success) {
            store.commit(‘hideLoading‘) /**请求成功后取消loading状态**/
          success(res.data)
          console.log(res.data);
        }
      }else if(res.data.code==‘800202‘){
          alert(‘身份已过期,请重新登录!‘)
          window.location.href = "/login";
      }else if(res.data.code==‘800203‘){
          alert(‘您的帐号已在其他设备登陆,请重新登录!‘)
          window.location.href = "/login";
      }else{
        if (failure) {
          failure(res.data)
        }else{
          console.log(‘error: ‘ + JSON.stringify(res.data))
        }
      }
    })
    .catch(function (err) {
      if(error){
        error(err)
      }
    })
}

-------END

原文地址：https://www.cnblogs.com/liujiajiablog/p/10551133.html