Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Regístrate o inicia sesión para continuar aprendiendo:
Empecemos definiendo un store para gestionar las categorías de nuestro proyecto. Ya que ello no debe ser responsabilidad de un solo componente.
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.
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.
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.
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
.
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
.
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.
¿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
.
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.
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
Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.