Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Intro: Responsabilidades
Hagamos un breve repaso sobre los componentes, los stores, y la data asociada, tanto a categorías como productos.
Separación de información en stores
En las últimas lecciones nos hemos encargado de separar la información de las categorías y de los productos a sus correspondientes stores.
Tenemos un store para categorías y un store para productos.
Esto es bueno porque anteriormente la data se encontraba como parte de los componentes.
Por ejemplo, este componente productList tenía aquí la definición de los productos.
Los productos se estaban creando dentro de un componente.
Si nosotros definimos los productos dentro de un componente y luego queremos acceder a esta información desde muchos otros componentes, entonces nuestro proyecto empieza a complicarse.
Por eso es importante el uso de stores.
Acceso al estado desde componentes
Usando un store podemos acceder al estado fácilmente de esta manera, y no sólo aquí, sino en cualquier otro componente que lo requiera.
El store nos permite acceder a la información y a modificar también esta información.
Incluso nos permite acceder a valores calculados a partir del state.
Organización del proyecto
Entonces, para organizar nuestro proyecto, un primer paso fue separar la data de los componentes y situarla en el store.
Hicimos lo mismo para las categorías.
Anteriormente teníamos la definición de las categorías dentro de componentes.
Teníamos por un lado los list-items y en la parte superior teníamos la definición de las categorías.
Ahora, en cambio, es parte del store de categorías.
Y aquí cuando queremos acceder, simplemente hacemos uso de mapState para acceder a cada variable de estado que nos interesa.
Este es un primer paso para organizar nuestro código.
Separación de responsabilidades
Si queremos dar un paso más allá, tenemos que separar el store de la data.
Porque el store debe estar encargado de leer datos y de modificar los datos, pero no de la definición de los datos como tal.
Los datos deberían ser obtenidos de una fuente de información.
En el desarrollo de software en general, siempre se recomienda separar la responsabilidad de nuestras clases y de nuestros archivos.
Mientras más carpetas tengamos, mientras más archivos tengamos, vamos a conseguir un mayor orden para nuestro proyecto.
Estructura de componentes
Por ejemplo, nosotros tenemos varios componentes.
En un inicio el menú de la izquierda era un solo componente.
Ahora ese componente incluye otros dos: incluye a las categorías e incluye a las opciones para ordenar.
Mientras más componentes tengamos, mientras más archivos tengamos, será mucho mejor.
Porque cada uno tendrá una responsabilidad más específica.
Y de esta manera, cuando queramos hacer cambios, vamos a poder hacerlos más rápidamente.
Ejemplo: modificación del carrito de compras
Por ejemplo, queremos cambiar alguna lógica relacionada al carrito de compras.
Lo haremos en el store correspondiente.
Aquí nosotros tenemos getters, tenemos actions que modifican al state.
Si queremos modificar algo sobre las categorías, lo haremos aquí.
Si queremos modificar algo sobre los productos, lo haremos aquí.
Y mantenemos un orden.
Información localizada
Los componentes acceden a la información a través de los stores.
Salvo que se trate de una información que es sólo para un componente.
Si tenemos datos que sólo un componente necesita, y esta información no va a ser consumida por otros componentes, entonces no es necesario poner ello en el store.
Sino que quedaría como parte del estado del mismo componente.
Pero generalmente, mientras más podamos separar, mucho mejor.
Objetivo del módulo
Entonces, ¿qué es lo que vamos a hacer en este módulo?
En este módulo vamos a ir un paso más allá y vamos a separar la data del store.
Separación de datos y lógica
Supongamos que nuestro proyecto ya se encuentra en producción y nosotros queremos modificar los datos de nuestro proyecto.
Idealmente no deberíamos modificar el store de categorías.
Porque si modificamos el store de categorías podríamos introducir algún bug, es decir, algún error en la lógica.
Y no solo para las categorías, también para los productos.
Por ejemplo, ¿qué pasa si yo quiero modificar la información de mis productos?
Por ejemplo, ¿qué pasa si yo quiero modificar la información de mis productos que sólo debería ser aquí?
Pero por equivocación podría borrar algún carácter como alguna llave.
Y esto podría causar que todo el store deje de funcionar.
Uso de archivos independientes
En cambio, si nosotros separamos la data de los productos a un nuevo archivo, si hacemos esa separación y queremos modificar la data de los productos, ya no hay riesgo de afectar al store.
Porque la data se gestiona en un archivo independiente.
Entonces, al estar en un archivo independiente podemos validar que tenga el formato adecuado.
Podemos fácilmente manipular este archivo que sólo contiene data.
Independientemente de la lógica de cada store.
Conclusión
Dicho de otra forma, vamos a crear un archivo json con la data de las categorías.
Y vamos a crear un archivo json con la data de los productos.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
En las últimas lecciones nos hemos encargado de separar la información de las categorías y de los productos a sus correspondientes stores. Tenemos un store para categorías y un store para productos. Esto es bueno porque anteriormente la data se encontraba como parte de los componentes. Por ejemplo, este componente “productList” tenía aquí la definición de los productos. Los productos se estaban creando dentro de un componente. Si nosotros definimos los productos dentro de un componente y luego queremos acceder a esta información desde muchos otros componentes, entonces nuestro proyectoempieza a complicarse. Por eso es importante el uso de “stores”. Usando un store podemos acceder al estado fácilmente de esta manera, y no sólo aquí, sino en cualquier otro componente que lo requiera. El store nos permite acceder a la información y a modificar también esta información. Incluso nos permite acceder a valores calculados a partir del “state”. Entonces, para organizar nuestro proyecto, un primer paso fue separar la data de los componentes y situarla en el store. Hicimos lo mismo para las categorías. Anteriormente teníamos la definición de las categorías dentro de “componentes”. Teníamos por un lado los “list-items” y en la parte superior teníamos la definición de las categorías. Ahora, en cambio, es parte del store de categorías y aquí cuando queremos acceder, simplemente hacemos uso de “mapState” para acceder a cada variable de estado que nos interesa. Este es un primer paso para organizar nuestro código. Si queremos dar un paso más allá, tenemos que separar el store de la data, porque el store debe estar encargado de leer datos y de modificar los datos, pero no de la definición de los datos como tal. Los datos deberían ser obtenidos de una fuente de información. En el desarrollo de software en general. Siempre se recomienda separar la responsabilidad de nuestras clases y de nuestros archivos. Mientras más carpetas tengamos, mientras más archivos tengamos, vamos a conseguir un mayor orden para nuestro proyecto. Por ejemplo, nosotros tenemos varios componentes. En un inicio el menú de la izquierda era un solo componente, ahora ese componente incluye otros dos. Incluye a las “categorías” e incluye a las “opciones para ordenar”. Mientras más componentes tengamos, mientras más archivos tengamos, será mucho mejor, porque cada uno tendrá una responsabilidad más específica. Y de esta manera, cuando queramos hacer cambios, vamos a poder hacerlos más rápidamente. Por ejemplo, queremos cambiar alguna lógica relacionada al carrito de compras. Lo haremos en el store correspondiente. Aquí nosotros tenemos “getters”, tenemos “actions” que modifican al “state”. Si queremos modificar algo sobre las categorías, lo haremos aquí. Si queremos modificar algo sobre los productos, lo haremos aquí y mantenemos un orden. Los componentes acceden a la información a través de los stores, salvo que se trate de una información que es sólo para un componente. Si tenemos datos que sólo un componente necesita, y esta información no va a ser consumida por otros componentes, entonces no es necesario poner ello en el store, sino que quedaría como parte del estado del mismo componente. Pero generalmente, mientras más podamos separar, mucho mejor. Entonces, ¿qué es lo que vamos a hacer en este módulo? En este módulo vamos a ir un paso más allá y vamos a separar la data del store. Supongamos que nuestro proyecto ya se encuentra en producción y nosotros queremos modificar los datos de nuestro proyecto, idealmente no deberíamos modificar el store de “categorías”, porque si modificamos el store de categorías podríamos introducir algún “bug”, es decir, algún error en la lógica, y no solo para las categorías, también para los productos. Por ejemplo, qué pasa si yo quiero modificar la información de mis productos, Por ejemplo, qué pasa si yo quiero modificar la información de mis productos que sólo debería ser aquí, pero por equivocación podría borrar algún carácter como alguna llave, y esto podría causar que todo el store deje de funcionar. En cambio, si nosotros separamos la data de los productos a un nuevo archivo, si hacemos esa separación y queremos modificar la data de los productos, ya no hay riesgo de afectar al store porque la data se gestiona en un archivo independiente. Entonces, al estar en un archivo independiente podemos validar que tenga el formato adecuado. Podemos fácilmente manipular este archivo que sólo contiene data. Independientemente de la lógica de cada store. Dicho de otra forma, vamos a crear un archivo json con la data de las categorías y vamos a crear un archivo json con la data de los productos.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript