proposal-extend-createActionHelpers.js

import { createActionHelpers } from 'vuex-loading';

const helpers = createActionHelpers({ moduleName: 'loading' });

helpers.mapActions = actions => {
    for (let [action, handler] of Object.entries(actions)) {
        actions[action] = (ctx, ...rest) => {
            ctx.$loading = {
                startLoading: actionName => helpers.startLoading(ctx.dispatch, actionName || action),
                endLoading:   actionName => helpers.endLoading(ctx.dispatch, actionName || action),
            };

            return handler(ctx, ...rest);
        };
    }

    return actions;
};

helpers.mapDecoratedActions = actions => {
    for (let [action, handler] of Object.entries(actions)) {
        actions[action] = async (ctx, ...rest) => {
            helpers.startLoading(ctx.dispatch, action);

            try {
                return await handler(ctx, ...rest);
            } finally {
                helpers.endLoading(ctx.dispatch, action);
            }
        };
    }

    return actions;
};


// usage with module actions
export default {
    actions: {
        ...helpers.mapActions({
            async fetchUsefulData(ctx) {
                ctx.$loading.startLoading(); // => startAction(ctx.dispatch, 'fetchUsefulData')

                const data = await fetch();

                ctx.commit('someCommit', data);

                ctx.$loading.endLoading(); // => endAction(ctx.dispatch, 'fetchUsefulData')
            }
        }),
        
        ...helpers.mapDecoratedActions({
            async fetchUsefulData(ctx) { // => startAction(ctx.dispatch, 'fetchUsefulData')
                const data = await fetch();

                ctx.commit('someCommit', data);
            } // => endAction(ctx.dispatch, 'fetchUsefulData')
        })
    }

};