eiru_purchases/src/store/modules/product.js

const state = {
    products: [],
    loadingProducts: true,
    filteredProducts: [],
    productWithVariant: null
}

const getters = {
    products(state) {
        return state.products
    },
    visibleProducts(state) {
        return state.filteredProducts.length === 0 ? state.products : state.filteredProducts
    },
    variants(_, getters) {
        return getters.products.flatMap(p => p.variants)
    },
    productWithVariant(state) {
        return state.productWithVariant
    },
    showProductForm(state) {
        return !!state.productWithVariant
    },
    loadingProducts(state) {
        return state.loadingProducts
    }
}

const mutations = {
    setProducts(state, payload) {
        state.products = [...payload]
    },
    setProductWithVariant(state, payload) {
        state.productWithVariant = payload
    },
    setFilteredProducts(state, payload) {
        state.filteredProducts = [...payload]
    },
    setLoadingProducts(state, payload) {
        state.loadingProducts = !!payload
    }
}

const actions = {
    initProducts({ commit }, payload) {
        commit('setProducts', payload)
        commit('setLoadingProducts', false)
    },
    selectProduct({ commit, dispatch }, payload) {
        if(!payload) {
            commit('setProductWithVariant', null)
            return
        }

        if (payload.variantCount > 1) {
            commit('setProductWithVariant', payload)
            return
        }

        if (!payload.variantCount) {
            dispatch('addToCart', payload)
            commit('setProductWithVariant', null)
        } else {
            dispatch('addToCart', payload.variants[0])
        }
    },
    filterProducts({ commit }, payload) {
        commit('setFilteredProducts', payload)
    },
    selectProductVariant({ commit, dispatch }, payload) {
        commit('setProductVariant', null)

        if (!payload) return

        dispatch('addToCart', payload)
    },
    showProductForm({ commit }) {
        commit('setShowProductForm', true)
    },
    hideProductForm({ commit }) {
        commit('setShowProductForm', false)
    },
    submitProduct({ commit, dispatch }, payload) {
        if (payload) {
            if (!payload.name || !payload.price) {
                dispatch('notify', 'Complete los campos para guardar')
                return
            }

            commit('setLoadingProducts', true)
            dispatch('createProduct', payload)
        }

        dispatch('hideProductForm')
    },
    addProduct({ commit }, payload) {
        commit('addProduct', payload)
        commit('setLoadingProducts', false)
    },
    resetProduct({ commit }) {
        commit('setLoadingProducts', true)
        commit('setProducts', [])
        commit('setFilteredProducts', [])
    }
}

export default {
    state,
    getters,
    mutations,
    actions
}