Soy nuevo en Vue.
Veo que la gente sugiere que necesitamos usar un módulo Vuex para que los componentes almacenen sus datos de estado para que podamos acceder a esos datos en el componente principal.
Por ejemplo, tengo el componente MarkdownEditor.vue y tendré que acceder a sus datos desde el padre. Guardo el estado en un módulo Vuex, por ejemplo, markdownEditorStore.js... Puedo acceder fácilmente a este estado en el componente principal, como this.$store.state.markdownEditor.XYZ .
Está bien. Pero, ¿qué sucede si tengo una cantidad n de componentes MarkdownEditor y necesito estados aislados para cada uno de ellos? Este es un problema muy básico, pero ¿cómo puedo manejar esto?
Necesito una solución basada en instancias de módulo, no basada en un módulo.
La característica del módulo es dividir la lógica entre diferentes dominios (Editor en su caso es un módulo). No para las instancias en sí.
La regla general es que el padre que se conectará con la tienda Vuex pasa a MarkdownEditor.vue los datos necesarios para cargar. Idealmente, MarkdownEditor puede cargar solo con los accesorios recibidos del padre. Esta es una buena práctica para separar lo visual del estado. Haciendo que sea más fácil de probar y una API de componente clara.
Aunque tiene N posibles instancias de ME (MarkdownEditor), muestra una a la vez o varias. Para ambos casos, puede tener un MarkdownEditorDataStore que contendrá todos los datos necesarios.
Luego, solo necesita acceder a los datos correctos para cada instancia de ME. Y eso depende de la estructura de su tienda y componentes. Dos formas en las que puedo pensar es que tiene una matriz para la instancia de N ME como editors: [ { id: 1, title: X}, { id: 2, title: Y } ] o un objeto que contiene todos los datos { editors: { 1: {id: 1, title: X }, 2: { id: 2, title: Y } } .
Puede obtener los datos a través de this.$store.state.MarkdownEditorDataStore.editors[myID] o this.$store.state.MarkdownEditorDataStore.editors.find(id => myID === id)
Puede tener una propiedad de datos que contenga el currentEditorId de editor actual en caso de que muestre solo una instancia a la vez. Incluso es mejor usar un getter en ese caso para mostrar el actualCurrentEditorObject .
Lo que entiendo de su pregunta es que desea un estado individual para cada componente que puede lograr creando un módulo separado con namespace=true para cada componente https://vuex.vuejs.org/guide/modules.html#namespacing