我正在创建一个应用程序VueJS我想创建一个服务或全局变量来存储客户端是否向服务器发出请求。
我一直在考虑配置一个中断器，在发出请求时将全局变量设置为 true，在请求完成时将变量设置为 false。
因此，当我使用加载器组件时，它仅在变量为 true 时显示。
Example:
// As i do
<form @submit.prevent="save">
<h2>{{ $t('organization.labels.organization')}}</h2>
<div class="row">
<div class="col m6 s12" v-if="$route.name == 'organization'">
<form-input-text :title="$t('organization.labels.client_number')" :model.sync="form.client.client_number" ></form-input-text>
</div>
<div class="col m6 s12">
<div class="center" v-if="loader.is_loading">
<material-loader></material-loader>
<br> <small>{{ $t('organization.labels.loading')}}</small>
</div>
</div>
</div>
</form>
// As it should work
<form @submit.prevent="save">
<h2>{{ $t('organization.labels.organization')}}</h2>
<div class="row">
<div class="col m6 s12" v-if="$route.name == 'organization'">
<form-input-text :title="$t('organization.labels.client_number')" :model.sync="form.client.client_number" ></form-input-text>
</div>
<div class="col m6 s12">
<div class="center" v-if="$loader.is_loading"> <== $loader
<material-loader></material-loader>
<br> <small>{{ $t('organization.labels.loading')}}</small>
</div>
</div>
</div>
</form>
任何想法？？
主要思想是必须为每个视图创建一个变量 is_loading，以了解用户是否正在请求某些内容。
答案是创建一个变量正在加载在我的 app.vue 中，它是应用程序容器（$root）。
<template>
<div id="app">
<navigation></navigation>
<div class="main-container">
<router-view></router-view>
</div>
<!-- <binnacle-footer></binnacle-footer> -->
</div>
</template>
<script>
import UserProvider from 'users/provider/User.provider'
import session from 'session/index'
export default {
data() {
return{
loader : {
is_loading : false
}
}
},
methods :{
getUser(){
var self = this;
self.$root.loader.is_loading = true;
UserProvider.get().then((user)=>{
self.$root.loader.is_loading = false;
self.current_user = user;
}).catch((err)=>{
self.$root.loader.is_loading = false;
})
}
},
ready(){
this.getUser();
},
}
</script>
然后你只能使用 $root 在任何你想要的地方调用它。
:)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
