Creating Global Variable for AJAX loading

Question

I have a lot of AJAX requests in my app and I'd like to show loading icon for every request and remove it when response is received. I am using axios for these calls, so I created a simple plugin class and added custom axios interceptors.

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;

Then the interceptors

// 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);
});

So that part works fine. my global variable is toggled true/false at the appropriate time. What I am having difficulty with is how do I set a variable on my main template that actually toggles it?

In my example, I have an inline-template that is the root of my entire project.

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

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

Then in my home.js file:

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

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

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

The issue is shouldShowLoadMask is only fired once at the beginning of the app. So I need to watch (or something similar) on the plugin variable. But how? I saw an example where someone referenced Vuex, but I am not using it in my app.

TL;DR: How do I monitor a global plugin variable so I can toggle an element on and off with v-if ?

It is a shame you are not using Vuex. I found it to be perfect for handling state across my application, and I use it extensively as a buffer between API calls and the presentation components. — Phil
– Phil, Commented Dec 18, 2017 at 14:29
You should really try and refactor to Vuex because this will save you headaches like these. — Stephan-v
– Stephan-v, Commented Dec 18, 2017 at 16:05
The problem is the application is built on top of spark, which doesn't use Vuex. And it's all but done. Everything is working as it should except for this. If that's the only way to control it, I'll look for another solution. I hate to include Vuex just for this one tiny thing. — Nathan
– Nathan, Commented Dec 18, 2017 at 16:17

Bert · Accepted Answer · 2017-12-18 18:13:15Z

The super simple way to make a reactive global variable is just to use a Vue. Here is the concept:

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

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

Then you can use it in Vue like so:

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>

Obviously you need to do a little work in your app, but this is the core of a very simple reactive global object.

Collectives™ on Stack Overflow

Creating Global Variable for AJAX loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related