vue项目全局定义 loading_app.vue放入loading组件

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

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

引入vuex

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

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');
1
2
3
4
5
6
7
8

在能正常使用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是否展示
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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')//隐藏
1
2
3
4
5
6
7
8
9
10