[Vue] Vuex Module Example

client.js

import { instance } from '../../api'

const state = {
    statsGeneral: [],
    loadingStatsGeneral: true,

    statsClients: [],
    loadingStatsClients: true
}

const getters = {
    statsGeneral: state => state.statsGeneral,
    loadingStatsGeneral: state => state.loadingStatsGeneral,

    statsClients: state => state.statsClients,
    loadingStatsClients: state => state.loadingStatsClients
}

const mutations = {
    'GET_GENERAL_REQUEST': () => {
        state.loadingStatsGeneral = true
    },

    'GET_GENERAL_SUCCESS': (state, payload) => {
        state.statsGeneral = payload
        state.loadingStatsGeneral = false
    },

    'GET_GENERAL_FAILURE': () => {
        state.statsGeneral = []
        state.loadingStatsGeneral = false
    },

    'GET_CLIENTS_REQUEST': () => {
        state.loadingStatsClients = true
    },

    'GET_CLIENTS_SUCCESS': (state, payload) => {
        state.statsClients = payload
        state.loadingStatsClients = false
    },

    'GET_CLIENTS_FAILURE': () => {
        state.statsClients = []
        state.loadingStatsClients = false
    }
}

const actions = {
    getStatsGeneral: async (store) => {
        store.commit('GET_GENERAL_REQUEST')

        try {
            const { data } = await instance.get('reports/general')

            store.commit('GET_GENERAL_SUCCESS', data)
        } catch (err) {
            store.commit('GET_GENERAL_FAILURE')
        }
    },

    getStatsClients: async (store) => {
        store.commit('GET_CLIENTS_REQUEST')

        try {
            const { data } = await instance.get('reports/clients')

            store.commit('GET_CLIENTS_SUCCESS', data.reports)
        } catch (err) {
            store.commit('GET_CLIENTS_FAILURE')
        }
    }
}

export const client = {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}