在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在任何你想要的地方調用它。

:)

Answer 2

你有沒有嘗試過：

window.is_loading = true;

if (window.is_loading) { }

每條評論更新：

該變量的范圍不可用於模板。 如果您可以為ajax響應引發事件以啟動/結束，則可以在模板之外處理它。 而不是模板中的條件，將其始終包含在模板中，但將DIV CSS屬性設置為display：none。 然后在啟動事件處理程序中，將其設置為display：inline和event response for received 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;

或者通過映射getteres：

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