vue2.0整个项目loading效果
1.根据官方文档，首先创建一个store，定义一个初始 state 对象和一些 mutation：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state : {
loading:false
},
mutations : {
loading (state,extra) {
state.loading = extra
console.log(state.loading)
}
}
})
export default store //暴露给外部引用2.在main.js中写一个拦截器，动态改变loading状态
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
import store from './store/store'
Vue.use(ElementUI)
Vue.use(VueResource)
// 拦截器
Vue.http.interceptors.push((request, next) =>{
let TOKEN=sessionStorage.getItem('STORAGE_TOKEN');
if(TOKEN){
request.headers.set('TOKEN',TOKEN);
}
store.commit('loading',true)
next((response) => {
store.commit('loading',false)
return response;
});
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
3.在App.vue中动态响应state.loading的状态
<template>
<div id="app">
<img src="./assets/logo.png">
<div id="loading" v-show="loading">
<div class="loading" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.8)"></div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data(){
return {
}
},
computed : {
...mapState ({
loading: state => state.loading
})
},
}
</script>4.效果图
备注：这里采用的是element-ui中的loading效果，也可以自行写一个loading组件调用