在Vuejs中创建全局变量 [英] Creating global variables in Vuejs

问题描述

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

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

示例：

  //像我一样< form @ submit.prevent =save> < h2> {{$ t（'organization.labels.organization'）}}< / h2> < div class =row> < div class =col m6 s12v-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 =centerv-if =loader.is_loading> <材料装载机>< /材料装载机> <峰; br> < small> {{$ t（'organization.labels.loading'）}}< / small> < / DIV> < / DIV> < / DIV> < / form> //因为它应该工作< form @ submit.prevent =save> < h2> {{$ t（'organization.labels.organization'）}}< / h2> < div class =row> < div class =col m6 s12v-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 =centerv-if =$ loader.is_loading> < == $ loader< material-loader>< / material-loader> <峰; br> < small> {{$ t（'organization.labels.loading'）}}< / small> < / DIV> < / DIV> < / DIV> < / form>  

主要想法是必须创建一个变量is_loading，以便每个视图知道用户是否在请求某些东西。

解决方案

答案是在app.vue中创建一个变量 is_loading ，它是应用程序容器（$ root）。

 < template> < div id =app> <导航>< /导航> < div class =main-container> <路由器视图>< /路由器视图> < / DIV> <！ - < binnacle-footer>< / binnacle-footer> - > < / DIV>< /模板><脚本>从'users / provider / User.provider'导入UserProvider从'session / index'导入会话导出默认{data（）{return {loader：{is_loading：false}}}，方法：{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来调用它。

：）

i am creating an application in VueJS and i would like to create a service or global variable which stores if the client is making a request to the server. I have been thinking in configure an interruptor which sets the global variable to true when is making a request, and when the request is finished sets the variable to false.

So when i use a loader component it shows only when the variable is 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>

Any idea?? The main idea is to have to create a variable is_loading, for each view to know if the user is requesting for something.

解决方案

the answer was to create a variable is_loading in the my app.vue which it is the app container ($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>

and then you must only call it wherever you want by using $root.

:)

这篇关于在Vuejs中创建全局变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！