本文共 1452 字，大约阅读时间需要 4 分钟。

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

loading.vue 

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: '
   '})

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

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

转载地址：http://xjesi.baihongyu.com/