在 Vuejs 中创建全局变量

Question

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

所以当我使用加载器组件时，它仅在变量为真时显示。

例子：

// 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，它是应用容器 ($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 调用它。

:)

Answer 2

你试过了吗：

window.is_loading = true;

if (window.is_loading) { }

更新每条评论：

该变量的范围对模板不可用。如果您可以为 ajax 响应引发启动/完成事件，您可以在模板之外处理它。代替模板中的条件，始终将其包含在模板中，但将 DIV CSS 属性设置为 display:none。然后在 start 的事件处理程序中，将其设置为 display: inline 和 event handler for response received 再次将其设置为 display:none。

Answer 3

您可以制作一个 VUEX 模块并将其命名为 ajax.js，如下所示：

const state = {
    ajax: {is_loading: false}
};
const mutations = {
    'SET_LOADING' (state, status){
        state.ajax.is_loading = status;
    },
};
const actions = {
    set_loading: ({commit}, status) => {
        commit('SET_LOADING', status);
    },
};
const getters = {
    is_loading: state => {
        return state.ajax.is_loading;
    },
};
export default {
    state,
    mutations,
    actions,
    getters
};

然后你必须在 store.js 文件中注册它。

现在您可以在 Vue 实例旁边全局使用此代码：

import store from "./store/store";
window.axios.interceptors.request.use(function (config) {
    store.state.ajax.ajax.is_loading = true;
    return config;
}, function (error) {
    store.state.ajax.ajax.is_loading = false;
    return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
    store.state.ajax.ajax.is_loading = false;
    return response;
}, function (error) {
    store.state.ajax.ajax.is_loading = false;
    return Promise.reject(error);
});

我尝试使用此代码：

store.state.dispatch('set_loading', true);

但它不起作用！所以我用另一种语法来改变is_loading的值！

现在在您的组件中，您可以通过这种方式访问​​ is_loading 变量：

this.$store.getters.is_loading;

或通过映射getter：

computed:{
    ...mapGetters([
        'is_loading'
    ]),
},