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
Define Store: Categories
Empecemos definiendo un store para gestionar las categorías de nuestro proyecto. Ya que ello no debe ser responsabilidad de un solo componente.
Refactorización de CategoryList
Nosotros, en una lección anterior, hemos refactorizado nuestro ProductList.
La información de los productos se lee a partir de un store.
No es recomendable tener la información directamente sobre los componentes.
Necesitamos acceder a los productos, y esta información depende de otros factores.
Por ejemplo, si se quiere ver sólo los productos de una categoría.
O si se quiere obtener los productos ordenados en base a algún criterio.
Delegamos la gestión de los datos al store.
Luego simplemente hacemos mapState para leer datos.
O bien usamos mapActions si queremos ejecutar acciones.
Refactorizando CategoryList
Ahora vamos a refactorizar CategoryList.
La idea es que este componente sea más fácil de leer.
Actualmente tiene muchas responsabilidades.
Por ejemplo, este CategoryList está definiendo la lista de categorías.
Es mejor que esta información se solicite al store.
El store debe ser el encargado de proporcionarnos estos datos.
Creación del nuevo store
Primero que todo, vamos a definir un nuevo store.
Actualmente ya tenemos dos: uno para el carrito de compras y otro para los productos.
Vamos a agregar un nuevo store llamado categories.ts.
Nos vamos a guiar un poco de nuestro store de productos.
Vamos a copiar todo eso para guiarnos y definir nuestro store de categorías.
Estado inicial del store
Vamos a empezar teniendo cero getters.
Y en sí mismo ninguna acción.
Tenemos un objeto getters, pero vacío.
Tenemos un objeto actions, también vacío.
La parte importante es el state.
El state tendrá una variable llamada categories.
Vamos a invocar defineStore.
El nombre para nuestro store será categories.
Lo que esto nos devuelva lo vamos a exportar bajo el nombre de useCategoriesStore.
Vamos a empezar teniendo un arreglo vacío.
Haremos casting al tipo de dato category.
Importaciones necesarias
Nos está resaltando dos palabras.
No hemos importado la función defineStore desde pinia.
Tampoco el tipo de dato category.
Para importar, simplemente agregamos las directivas import en la parte superior.
Así accedemos tanto a defineStore como a category.
Debido a que category es un tipo, tenemos que usar import type.
Estado listo en el store
Aquí tenemos ya un estado representando nuestras categorías.
Las categorías que antes estaban en el componente se desplazan al nuevo archivo.
Queda un arreglo con dos opciones.
categories ya no forma parte del estado del componente.
Ahora es parte del store nuevo que hemos definido.
Accediendo al estado del store
¿De qué manera podemos acceder al estado de nuestro store?
Podemos hacerlo a través de Computed Properties.
Dentro de computed, vamos a mapear el estado usando la función mapState.
A mapState tenemos que indicarle qué store debe usar.
En este caso usaremos useCategoriesStore.
Indicamos qué variable queremos mapear: categories.
Importaciones adicionales
Nos resalta useCategoriesStore.
Vamos a agregar un import y vamos a importar useCategoriesStore desde la carpeta stores.
Específicamente del archivo categories.
Recordemos encerrar useCategoriesStore entre llaves.
Esto porque categories está haciendo export de useCategoriesStore con este formato.
Se está haciendo un export const.
Podrían haber varios export en ese archivo.
Por eso se usa esta sintaxis de llaves.
También hay que importar mapState, que es un helper de Pinia.
El import type de categories lo vamos a quitar.
Ahora esa definición está en nuestro store de categorías.
Verificación final
Hasta aquí vamos a verificar que todo continúe funcionando correctamente.
Estamos listos.
Podemos filtrar por categoría.
Podemos ordenar en base al criterio que queramos.
Y todo continúa funcionando correctamente.
La diferencia es que ahora CategoryList ya no gestiona las categorías.
Lo hace ahora el store.
Nosotros simplemente leemos la data.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Nosotros, en una lección anterior, hemos refactorizado nuestro "ProductList", de tal manera que la información de los productos se lea a partir de un "store". Porque no es recomendable tener la información directamente sobre los componentes ya que necesitamos acceder a los productos y esta información depende de otros factores, como por ejemplo si se quiere ver sólo los productos de una categoría o si se quiere obtener los productos ordenados en base a algún criterio. Entonces delegamos la gestión de los datos al "store" y luego simplemente hacemos "mapState" para leer datos. O bien usamos "mapActions" si queremos ejecutar acciones Siguiendo la misma idea, ahora vamos a refactorizar "CategoryList”. La idea es que este componente sea más fácil de leer, ya que actualmente tiene muchas responsabilidades. Por ejemplo, este "CategoryList" se encuentra definiendo la lista de categorías. Es mejor que esta información se solicite al "store" y el "store" sea el encargado de proporcionarnos estos datos. Entonces, lo que vamos a hacer, primero que todo, es definir un nuevo “store”. Actualmente ya tenemos dos uno para el carrito de compras y otro para los productos. Entonces vamos a agregar un nuevo “store” que se va a llamar “categories.ts”. Vamos a guiarnos un poco de nuestro “store” de productos. Vamos a copiar de hecho todo esto para guiarnos y definir nuestro "store" de categorías. Vamos a empezar teniendo cero "getters" y en sí mismo ninguna acción. Entonces tenemos un objeto "getters", pero vacío. Tenemos un objeto "actions", también vacío. Y aquí viene la parte importante que es el "state". El "state" en este caso va a tener una variable llamada "categories". Vamos a invocar a “defineStore” y el nombre para nuestro "store" será "categories". Luego, lo que esto nos devuelva lo vamos a exportar bajo el nombre de y "useCategoriesStore”. Finalmente, vamos a empezar teniendo un arreglo vacío y vamos a hacer casting al tipo de dato "category". Como vemos, nos está resaltando dos palabras porque no hemos importado la función “defineStore” desde “pinia” y tampoco el tipo de dato "category". Para importar, simplemente agregamos las directivas “import” en la parte superior y de esta manera accedemos tanto a “defineStore” como a "category". Debido a que "category" es un tipo tenemos que usar “import type” Bien, aquí tenemos ya un estado representando nuestras categorías. Entonces, las categorías que antes habíamos definido en el componente lo vamos a desplazar a este otro archivo, quedando un arreglo con dos opciones. Bien, entonces "categories" ya no forma parte del estado del componente, sino que es parte del "store" nuevo que hemos definido. ¿De qué manera podemos acceder entonces al estado de nuestro "store"? Ello lo podemos hacer a través de “Computed Properties”. Aquí dentro de “computed” vamos a mapear el estado, usando la función “mapState”. A la función "mapState" tenemos que indicarle que "store" debe usar. En este caso pediremos que use “useCategoriesStore" que indicamos que variable queremos mapear. En este caso "categories". Bien, aquí nos resalta esta palabra porque nos ha encontrado este ”useCategoriesStore". Por lo tanto, vamos a agregar por aquí un “import” y vamos a importar y “useCategoriesStore" desde la carpeta “stores”, específicamente del archivo "categories". Recordemos que aquí tenemos que encerrar este “useCategoriesStore" entre llaves debido a que "categories" está haciendo ”export” de "useCategoriesStore" con este formato. Se está haciendo un “export const” y podrían haber varios “export” en este archivo, por lo tanto, se usa esta sintaxis de llaves. Tenemos que importar también "mapState", que es un helper que nos proporciona pinia. Ahí está. Y este “import type” de "categories" lo vamos a quitar porque ahora tenemos esa definición más bien en nuestro "store" de categories. Hasta aquí vamos a verificar que continúe funcionando correctamente. Entonces, aquí estamos. Podemos filtrar por categoría. Podemos ordenar en base al criterio que queramos y todo continúe funcionando correctamente. La diferencia es que ahora "CategoryList" ya no es el encargado de gestionar las categorías. Lo hace ahora el "store". Nosotros simplemente leemos la data.
¿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