爲AJAX加載創建全局變量

我的應用程序中有很多AJAX請求，我想爲每個請求顯示加載圖標，並在收到響應時將其刪除。我爲這些調用使用axios，所以我創建了一個簡單的插件類並添加了定製的axios攔截器。爲AJAX加載創建全局變量

const MyGlobalVariables= { 
    install(Vue, options) { 

    Vue.load_mask = true; 

    MyGlobalVariables.getLoadMask = function() { 
     return Vue.load_mask; 
    }, 

    MyGlobalVariables.setLoadMask = function(val) { 
     Vue.load_mask = val; 
    } 

    } 
}; 
export default MyGlobalVariables;

然後攔截

// Add a request interceptor 
window.axios.interceptors.request.use(function (config) { 

    // Do something before request is sent 
    MyGlobalVariables.setLoadMask(true); 
    console.log(MyGlobalVariables.getLoadMask()); 

    return config; 
}, function (error) { 
    MyGlobalVariables.setLoadMask(false); 

    console.log(MyGlobalVariables.getLoadMask()); 
    // Do something with request error 
    return Promise.reject(error); 
}); 

// Add a response interceptor 
window.axios.interceptors.response.use(function (response) { 

    // control the load mask on AJAX calls 
    MyGlobalVariables.setLoadMask(false); 
    console.log(MyGlobalVariables.getLoadMask()); 
    return response; 

}, function (error) { 

    MyGlobalVariables.setLoadMask(false); 
    console.log(MyGlobalVariables.getLoadMask()); 
    // Do something with response error 
    return Promise.reject(error); 
});

所以這部分工作正常。我的全局變量在適當的時候切換爲真/假。我遇到的困難是如何在我的主模板上設置一個實際切換它的變量？

在我的例子中，我有一個inline-template，它是我整個項目的根。

<home :user="user" inline-template> 
    // Bunch of content here 

    <div v-if="shouldShowLoadMask" class='lmask'></div> 
</home>

然後在我的home.js文件：

import MyGlobalVariables from "./extras/my-global"; 

Vue.component('home', { 
    props: ['user'], 

    computed: { 
    shouldShowLoadMask() { 
     console.log('show load mask? ' + MyGlobalVariables.getLoadMask()); 
     return MyGlobalVariables.getLoadMask(); 
    }, 
    }

的問題是shouldShowLoadMask僅在應用程序開始時觸發一次。所以我需要在插件變量watch（或類似的東西）。但是如何？我看到有人引用了Vuex，但我沒有在我的應用中使用它。

TL; DR：如何監視全局插件變量，以便我可以使用v-if開啓和關閉元素？

來源

2017-12-18 Nathan

這是一個恥辱，你沒有使用Vuex。我發現它非常適合在我的應用程序中處理狀態，並將其廣泛用作API調用和表示組件之間的緩衝區。 – Phil

您應該嘗試重構Vuex，因爲這會爲您節省像這樣的麻煩。 –

問題是應用程序建立在spark之上，不使用Vuex。而這一切都完成了。除此之外，所有事情都應該如此。如果這是控制它的唯一方法，我會尋找另一種解決方案。我討厭將Vuex包含在這一件小事中。 – Nathan

製作反應性全局變量的超級簡單方法就是使用Vue。這裏的理念是：

const global = new Vue({data:{loading: false}}) 

const GlobalPlugin = { 
    install(Vue){ 
    Vue.prototype.$global = global 
    } 
}

然後你可以使用它在Vue公司，像這樣：

console.clear() 
 

 
// set up the reactive global object 
 
const global = new Vue({data:{loading: false}}) 
 

 
// make a plugin to add it to Vue 
 
const GlobalPlugin = { 
 
    install(Vue){ 
 
    Vue.prototype.$global = global 
 
    } 
 
} 
 

 
Vue.use(GlobalPlugin) 
 

 
// Set up a faux change to the global loading property 
 
setInterval(() => global.loading = !global.loading, 2000) 
 

 
// Reactivity! 
 
Vue.component("some-component", { 
 
    template:` 
 
    <div> 
 
     <h2> Some component </h2> 
 
     Loading: {{$global.loading}} 
 
    </div> 
 
    ` 
 
}) 
 

 
new Vue({ 
 
    el: "#app", 
 
    computed:{ 
 
    loading() { 
 
     return this.$global.loading 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script> 
 
<div id="app"> 
 
    <h2>Root Vue</h2> 
 
    Loading: {{loading}} 
 
    <some-component></some-component> 
 
</div>

顯然，你需要做一些工作在你的應用程序，但是這是一個的核心非常簡單的反應性全局對象。

來源

2017-12-18 18:13:15 Bert

爲AJAX加載創建全局變量

回答

相關問題