vuex: how to save data from multiple components? - vue.js

Question

If I follow the vuex state docu I get a simple counter. Now I can use this counter as a component like this: https://jsfiddle.net/zr86xtqg/. Its easy to note that all counters use the same data (like a component without data: function(){...}).
What do I need to do to get a real component with unique data? Should I add an array to the store and push each counter into it?
Sorry for this simple question but I am totally new to this state managment / data handling.
Maybe it's nice to know why I need it: There is a place in my app with a variable mix of components and another place where I have to display some of the component data. I googled a bit and found many recommendation to use vuex.
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++,
decrement: state => state.count--
}
})
Vue.component('test-counter', {
computed: {
count () {
return store.state.count
}
},
template: '<div><p>{{ count }}</p><button #click="increment">+</button><button #click="decrement">-</button><p></div>',
methods: {
increment () {
store.commit('increment')
},
decrement () {
store.commit('decrement')
}
}
})
new Vue({
el: '#app'
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.2/vuex.min.js"></script>
<div id="app">
<test-counter></test-counter>
<test-counter></test-counter>
</div>

Answer 1

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

Answer 2

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/