Vuex: как сохранить данные из нескольких компонентов?

Question

Если я следую документу vuex State , я получаю простой счетчик. Теперь я могу использовать этот счетчик как компонент: https://jsfiddle.net/zr86xtqg/. Легко заметить, что все счетчики используют одни и те же данные (например, компонент без data: function(){...}).

Что мне нужно сделать, чтобы получить реальный компонент с уникальными данными? Должен ли я добавить массив в магазин и положить в него каждый счетчик sh?

Извините за этот простой вопрос, но я совершенно новичок в этом состоянии управления / обработки данных.

Может быть, приятно знать, зачем мне это нужно: в моем приложении есть место с переменным набором компонентов и другое место, где я должен отображать некоторые данные компонентов. Я немного погуглил и нашел много рекомендаций по использованию 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

Да, вы можете сделать несколько магазинов для различных модулей. Ниже я покажу вам пример того, как я делаю хранилище для многих модулей.

ВАЖНО Я рекомендую вам использовать namespace = true, это позволяет вам отличаться друг от друга

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

Это то, что вы пытаетесь достичь?

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/

ИСТОЧНИК:

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

ОБНОВЛЕНИЕ ДЕМО (Vuex)

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

ОБНОВЛЕНИЕ ДЕМО ( по новым требованиям)

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