vue项目全局定义 loading

最新推荐文章于 2025-06-27 16:42:27 发布

原创最新推荐文章于 2025-06-27 16:42:27 发布 · 913 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #loading #vuex #全局loading

vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

elementUi

2 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中利用Vuex实现全局Loading组件的显示与隐藏，通过App.vue和vuex/index.js的代码配置，实现了elementUI的Loading效果在页面加载过程中的统一管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目通过vuex全局定义loading，简单记录一下

涉及的方面：elementUI(其中loading) 、vuex

引入vuex

//main.js
import store from './vuex/index';

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

`在能正常使用elementUi和vuex前提下,直接记录全局loading的步骤`

1. App.vue

只保留有关loading的代码

<template>
   <div id="app"
       v-loading="isShow"
       element-loading-text="加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)"
   >
       <router-view v-if="isRouterAlive"></router-view>
   </div>
</template>


computed:{
      isShow(){
          return this.$store.getters.isLoadingShow;//监听全局loading是否展示
    }
},

2. vuex => index.js

只保留有关loading的代码

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
   //要设置的全局访问的state对象
   const state={
       //要设置的初始属性值
       jumpLoading: false
   };
   //实时监听state值的变化(最新状态)
   const getters = {
       //方法名随意,主要是来承载变化的showFooter的值
       isLoadingShow(state) { 
           return state.jumpLoading
       }
   };
   const mutations = {
       //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
       loadingShow(state) {
           state.jumpLoading = true;
       },
       loadingHide(state) {  //同上
           state.jumpLoading = false;
       }
   };
   //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
   const actions = {
       loadingShow(context) {
           context.commit('loadingShow');
       },
       loadingHide(context) {
           context.commit('loadingHide');
       }
   };
   const userStore = new Vuex.Store({
       state,
       getters,
       mutations,
       actions
   });
export default userStore;

2. 使用(如：login.vue)

login(){
let that = this
	that.$store.dispatch('loadingShow')    //展示全局loading
 	loginURL(param,(res)=>{
        that.$store.dispatch('loadingHide')    //隐藏全局loading
     })
}
//或者使用
this.$store.commit('loadingShow')//显示
this.$store.commit('loadingHide')//隐藏