[Vuejs]-Vuex: how to save data from multiple components?

Is this what you are trying to achieve?

HTML

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

JS

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

new Vue({ el: '#components-demo' })

DEMO

https://jsfiddle.net/emanuell_minciu/L4xot38s/

SOURCE:

https://v2.vuejs.org/v2/guide/components.html

DEMO UPDATE (Vuex)

https://jsfiddle.net/emanuell_minciu/Ljno612k/3/

DEMO UPDATE (based on new requirements)

https://jsfiddle.net/emanuell_minciu/cr5w87g4/53/

Yeah, you can make multiple store for various modules. Below I’ll show you an example that how I make the store for many modules.

IMPORTANT I recommend you to use namespace=true, It allow you differenciate from each other

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


const storeTercero = {
    namespaced:true,
    state: {
        razonSocial: null
    },
    mutations:{
        setRazon(pState, pRazon){
            pState.razonSocial = pRazon
        }
    }
}

const storeFactura = {
    namespaced:true,
    state:{
        numero: null
    },
    mutations:{
        setNumero(pState, pNumero){
            pState.numero = pNumero
        }           
    }
}

const storeProducto = {
    namespaced: true,
    state:{
        arr_pestanas: []
    },
    mutations:{
        setPestanas(pState,pArrPestanas){
            pState.arr_pestanas = pArrPestanas
        },
        setFolia1(pState,pObjFolia1){
            pState.arr_pestanas.folia1 = pObjFolia1
        },
        setCombinaciones(pState,pObjCombinaciones){
            pState.arr_pestanas.push(pObjCombinaciones)
        },
        limpiarPestanas(pState){
            pState.arr_pestanas = []
        },
        actualizarFolia(pState,payload){
            switch (payload.fila) {
                case 1:
                    pState.arr_pestanas[payload.indice].folia1= {
                        valor:payload.objeto.value,
                        texto:payload.objeto.display
                    }
                  break;
                case 2:
                    pState.arr_pestanas[payload.indice].folia2= {
                        valor:payload.objeto.value,
                        texto:payload.objeto.display
                    }
                    break;
                case 3:
                    pState.arr_pestanas[payload.indice].folia3= {
                        valor:payload.objeto.value,
                        texto:payload.objeto.display
                    }
                    break;
                default:
                    pState.arr_pestanas[payload.indice].folia1= null
                    pState.arr_pestanas[payload.indice].folia2= null
                    pState.arr_pestanas[payload.indice].folia3= null
                    break;
            }
        },
        eliminarIndice(pState,payload){
            pState.arr_pestanas.splice(payload.indice,1)
        }
    },
    actions:{
        actualizarFolia({commit},payload){
            commit('actualizarFolia',payload)
        },
        cambiarFoliaTodos({state,commit},payload){
            state.arr_pestanas.forEach((valor,indice,array) => {
                commit('actualizarFolia',{
                    indice,
                    fila:payload.fila,
                    objeto:payload.objeto
                })
            });
        },
        eliminarCombinacion({commit},payload){
            if (payload.indice > -1) {
                commit('eliminarIndice',{
                    indice:payload.indice
                })
            }
        }
    },
    getters:{
        pestanasCount: state => {
            return state.arr_pestanas.length
        }
    }
}

const storeCartera = {
    namespaced: true,
    state:{
        arrCarteraPagos: []
    },
    mutations:{
        actualizarVlrPago(pState,payload){
            pState.arrCarteraPagos[payload.fila] = payload.valorPago;
        },
        setVlrCarteraPagos(pState,payload){

            pState.arrCarteraPagos.filter(function(item){
                if(item.id === payload.id){
                    item.valorPagado = payload.vlr;
                }
            })

        },
        setArrCarteraPagos(pState,payload){
            pState.arrCarteraPagos = payload
        }
    }
}

const store = new Vuex.Store({
    strict: true,
    modules:{
        terceros: storeTercero,
        facturas: storeFactura,
        productos: storeProducto,
        cartera: storeCartera
    }
})


export default store