vuex存储loading加载

一套基于 Vue.js 的高质量 UI 组件库 iView

loading.vue

<template>
  <div class="loading">
    <Spin fix size="large"></Spin>
  </div>

</template>

<script>
  import { Spin } from 'iview'
    export default {
        name: "loading"
    }
</script>

<style lang="stylus">
  .loading{
    background #fff;
    opacity 0.5;
    width: 100%;
    height: 100%;
    position absolute;
    top:0;
    left:0;
    right:0;
    bottom :0;
    z-index 9999;

  }
</style>

1.loading.js

const loading = {
  state:{
    isLoading:false,
    showModal:true
  },
  mutations:{
    BEGIN_LOADING(state){
      state.isLoading = true
    },
    END_LOADING(state){
      state.isLoading = false
    },
    MODAL_LOADING(state){
      state.showModal = false
    }
  },
  actions:{
    beginLoading({ commit }){
      commit('BEGIN_LOADING')
    },
    endLoading({ commit }){
      commit('END_LOADING')
    },
    modalLoading({ commit }){
      commit('MODAL_LOADING')
    }
  }
};
export default loading

2.store/index.js引入：也可以不把loading.js独立出来，直接放入store中，根据需要定

import Vue from 'vue';
import Vuex from 'vuex';
import loading from './loading';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules:{
    loading
  }
});
export default store

3.main.js引入store文件：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
...

//挂载
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

4.axios数据请求响应拦截使用：

import axios from 'axios';
import store from './store';
import router from './router'
axios.interceptors.request.use((config)=>{
   ......
  //携带token

  store.dispatch('beginLoading');
  return config
});
axios.interceptors.response.use((config)=>{

  ......
  store.dispatch('endLoading');
  //获取token,验证，跳转
  return config
})

在组件container.vue中使用：退出时候调用 loading

<template>
  <div>
    <div class="logout" @click="logout">退出</div>
    <loading v-if="this.$store.state.loading.isLoading" v-show="this.$store.state.loading.showModal"></loading>
  </div>
</template>
<script>
    import loading from '../components/loading'
    export default {
        name: "container",
        components:{
          loading
        },
        methods:{
          logout(){
            this.$Modal.confirm({
                  content: "确认退出吗？",
                  closable:true,
                  cancelText:"取消",
                  okText:"确定",
                  loading: true,
                  onOk:()=>{
                    this.$store.dispatch('modalLoading');
                    axios.get('/api/logout').then(res=>{
                          console.log(res)
                          if(res.data.result){
                            sessionStorage.clear();
                            this.$Modal.remove();
                            this.$Message.info('退出成功');
                            localStorage.removeItem('xAuthToken');
                            this.$router.push('/login')
                          }
                    })
                  },
                  onCancel:()=>{}
            });

      },
    }
</script>

由于之前没有加上loading组件在页面调用，再次补充。

vuex存储loading加载

猜你喜欢