页面加载loading

在store文件下moudules的user.js中配置
const user = {
  state: {
    loading: false,
  },

mutations: {
  CLOSE_LOADING: (state) => {
    state.loading = false
  },
  OPEN_LOADING: (state) => {
    state.loading = true
  }
},

actions：{
closeLoading: ({ commit }) => {
  commit('CLOSE_LOADING')
},
openLoading: ({ commit }) => {
  commit('OPEN_LOADING')
},
}

在store文件下getters.js中配置

const getters = {
  loading: state => state.user.loading,
}

在utils文件下的fetch.js文件中配置

import store from "../store";

// request interceptor
service.interceptors.request.use(config => {
  store.dispatch('openLoading')
 ........这个里面加，后面太多不复制了

  return Promise.reject('error')
} else {
  store.dispatch('closeLoading')
  return response
}

页面中=》

<div 

 v-loading="$store.getters.loading"  element-loading-text="加载中，请稍后~" element-loading-background="rgba(0, 0, 0, 0.8)">

这是文件截图配置