Javascript 在Vuejs中创建全局变量

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

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

例如：

//和我一样
{{$t（'organization.labels.organization'）}

{{$t（'organization.labels.loading'）}
//因为它应该起作用
{{$t（'organization.labels.organization'）}
您是否尝试过：

window.is_loading = true;

if (window.is_loading) { }

根据评论更新：

该变量的作用域对模板不可用。如果可以为ajax响应引发开始/完成事件，则可以在模板之外处理它。代替模板中的条件，将其始终包含在模板中，但将DIV CSS属性设置为display:none。然后在start的事件处理程序中，将其设置为display:inline，并将接收到的响应的事件处理程序再次设置为display:none。
答案是在my app.vue中创建一个变量is_loading，它是应用程序容器（$root）



从“users/provider/User.provider”导入UserProvider
从“会话/索引”导入会话
导出默认值{
数据（）{
返回{
加载器：{
正在加载：错误
}
}
},
方法：{
getUser（）{
var self=这个；
self.$root.loader.is_loading=true；
UserProvider.get（）。然后（（用户）=>{
self.$root.loader.is_loading=false；
self.current_user=用户；
}).catch（（错误）=>{
self.$root.loader.is_loading=false；
})
}
},
就绪（）{
这个.getUser（）；
},
}
您可以制作一个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_加载的值

现在，在您的组件中，您可以通过以下方式访问is_加载变量：

this.$store.getters.is_loading;

或者通过映射getteres：

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

这是一个好主意，但是，它对我没有帮助，因为它必须是反应式的，如果你阅读模板，我想使用v-if=”“。你的答案行不通（啊，仔细阅读您的问题，我发现您希望根据连接是否处于活动状态将变量设置为true/false。您的意思是，在用户提交后该变量应为true，而在服务器返回响应时该变量应为false？是的，是这样，但不是连接处于活动状态，而是在通过Ajax发出请求时，在创建Ajax请求之前ed我需要设置$is_loading=true，当ajax请求被解析$is_loading=false时，我不仅需要一个变量，我还需要一个反应变量，我尝试使用Vue.prototype在Vue prototype中对其进行扩展。$is_loading有效，但是当我使用{$is_loading}将其呈现到视图中时，它不是反应变量。：）