vuex を使用して、store.js での読み込み表示と非表示をグローバルに制御する
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
LOADING: false
},
mutations: {
showLoading(state) {
state.LOADING = true
},
hideLoading(state) {
state.LOADING = false
}
}
新しいロード用パブリックコンポーネントページを作成する
<template>
<div class="loading">
<van-loading type="spinner" color="#1989fa" />
</div>
</template>
<script>
import Vue from 'vue';
import {Loading} from 'vant';
Vue.use(Loading);
export default {
name: 'LOADING',
data() {
return {}
},
}
</script>
<style lang="scss" scoped>
.loading {
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
</style>
App.vue で、読み込みコンポーネントをプロジェクトのルート ノードにマウントします。
App.vue にマウントされた後、すべてのインターフェイス要求は読み込みコンポーネントを読み込みます。
必要なページにて別途お見積り可能です
<template>
<div id="app">
<Loading v-show="LOADING"></Loading>
......//其他代码
</div>
</template>
<script>
import {mapState} from 'vuex'
import Loading from '@c/Loading.vue'
export default {
// ...解构,将store中的state进行映射。
// 在template中可以直接使用,不需要通过this.$store.state一个个获取store中的state数据。
computed: {
...mapState(['LOADING'])
},
name: 'App',
components: {Loading}
}
</script>
リクエストインターセプターとレスポンスインターセプターで設定する
カプセル化された axios では、axios インターセプターを使用して、リクエスト時にストア表示のロードを送信します。
リクエストが失敗するか、送信が完了すると、ストアは読み込みを非表示にします。
import Vue from "vue";
import axios from 'axios';
import store from '../../store';
// 请求拦截器
axios.interceptors.request.use(function (config) {
store.commit('showLoading')
return config;
}, function (error) {
store.commit('hideLoading')
return Promise.reject(error);
});
//响应拦截器
axios.interceptors.response.use((response) => {
store.commit('hideLoading')
return response.data;
}, (error) => {
store.commit('hideLoading')
return Promise.reject(error);
});
//绑定到vue原型中
Vue.prototype.$http = axios;
単一のリクエストで使用される場合
// 在请求时
this.$store.commit('showLoading')
//请求完成后
this.$store.commit('hideLoading')