include `vue-loading` in vuex store

[yabasha]

Hello,

I tried to follow issue #38 to include vue-loading in vuex: store but didn't work:

import axios from "axios";
import Vue from "vue";

export default {
    namespaced: true,

   actions: {
           fetchData({commit}, payload) {
            commit('CLEAR_DIST_COMMODITY_PRICE_DATA');

            Vue.$loading.show({});

            axios
                .get(`/api/trends/commodities/districts/${payload.id}/${JSON.stringify(payload.dates)}`)
                .then((response) => {
                    commit('SET_DIST_COMMODITY_PRICE_DATA', response.data);

                    Vue.$loading.hide();
                })
                .catch(error => console.error(error));
        }
     }

and in my app.js file :

import Vue from "vue";
import store from "./store/store";
import Loading from 'vue-loading-overlay';

Vue.use(Loading, {
    height: 128,
    width: 128
});

.
.
.

and the style imported into app.scss:

@import "~vue-loading-overlay/dist/vue-loading.css";

I am using laravel-mix in laravel project.

Please advice,

[yabasha]

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

[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()
          })
    },

[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.