include `vue-loading` in vuex store about vue-loading-overlay

[ankurk91]

I am using the vue-loading without any problem with vuex, see example of an action

freshDocuments(context) {
      let loader = Vue.$loading.show()
      Vue.$http.get('documents/all')
          .then((response) => {
            context.commit('freshDocuments', response.data.data)
          })
          .catch((error) => {
            Vue.$toast.error('Error fetching documents.')
          })
          .finally((res) => {
            loader.hide()
          })
    },

[yabasha]

I can use it inside components but I want to display it with axios requests which are in store actions.

[tomisicm]

Is there a way to store loader as a reference and then just call show or hide methods on it?

const loader = context.root.$loading.show({
container: formContainer,
canCancel: false
})

const showLoader = () => {
loader.show()
}

const hideLoader = () => {
loader.hide()
}

Or something like this?

const showLoader = () => context.root.$loading.show({})

const hideLoader = () => {
showLoader().hide()
}

How do I achieve something like this? Found a way below, but can this be cleaner?

let loader

const showLoader = () => {
loader = context.root.$loading.show({})
return loader
}

const hideLoader = () => {
loader.hide()
}

@ankurk91

[ankurk91]

This is a general programing problem, i am not here to teach you how to code.