在Vuejs中创建全局变量

Question

我正在VueJS中创建一个应用程序,我想创建一个服务或全局变量,存储客户端是否向服务器发出请求.我一直在考虑配置一个interruptor,它在发出请求时将全局变量设置为true,并在请求完成时将变量设置为false.

因此,当我使用加载程序组件时,它仅在变量为true时显示.

例:

// 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,以了解用户是否正在请求某些内容.

Answer 1

答案是在我的app.vue中创建一个变量is_loading,它是app容器($ 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在任何你想要的地方调用它.

:)