Define Store: Categories

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.

Crea una cuenta y continúa aprendiendo 🚀

Define Store: Categories