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
Store: State, Getters & Actions
Veamos cómo se define una Store con Pinia, y la similitud que tiene con el estado y métodos de los componentes que ya hemos revisado.
Documentación de Pinia
La documentación de Pinia se encuentra en este subdominio: pinia.vuejs.org.
Acceder a la Documentación
Una vez que accedes a esta página, haz clic en Get Started. Esto te llevará a la introducción.
Si bajamos un poco, nos encontraremos con un ejemplo básico.
Definir un "Store"
Para definir un store, usamos la función defineStore, que se puede importar desde Pinia.
De esta manera, podemos definir un store.
Como primer argumento, indicamos el nombre que queremos para nuestro store. En este caso, se llama counter, seguido de un objeto para configurarlo.
Un store consta de un estado y de acciones que lo modifican.
Esto es similar a la gestión de estados en los componentes.
Diferencia entre "Store" y Componentes
La diferencia principal es que un store no está vinculado directamente a un solo componente. Puede asociarse a varios componentes.
Cuando definimos el estado de un componente con Options API, usamos data para definir el estado.
En el caso de los stores, utilizamos state para definir el estado.
Modificar el Estado
Para modificar el valor de los estados en los componentes, usamos métodos.
En los stores, utilizamos actions para modificar el estado.
Ejemplo: Carrito de Compras
Vamos a crear un store para manejar el carrito de compras.
De esta manera, se podrá modificar desde cada productCart y afectará a las secciones que nos interesan.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
La documentación de Pinia se encuentra en este subdominio pinia.vuejs.org. Una vez que accedes a esta página le das click get started y con esto llegarás a la introducción. Si bajamos un poco nos vamos a encontrar con un ejemplo básico ¿Cómo se define un "store" para definir un "store"? Usamos la función "defineStore" que se puede importar desde Pinia y de esta manera nosotros podemos definir un "store". Indicamos como primer argumento el nombre que queremos para nuestro "store". En este caso se le llama "counter" y luego un objeto para configurar el "store". Un "store" consta de un estado y de acciones que modifican al "store". Esto es bastante similar a la gestión de estados que tenemos para nuestros componentes. La única diferencia es que un "store" no está vinculado directamente solo a un componente, sino que se puede asociar a varios componentes. Cuando nosotros definimos el estado de un componente con opción CPI, nosotros hacemos uso de data para el estado. En el caso de los "stores", hacemos uso de "state" para definir el estado. Cuando nosotros queremos modificar el valor de nuestros estados, usamos métodos en los componentes. En el caso de los "stores" usamos "actions". Entonces hasta aquí vemos que un "store" tiene un estado y tiene "actions" que permiten modificar el estado. Por ejemplo, en nuestro caso vamos a crear un “store” para lo que viene a ser el carrito de compras, de tal manera que se pueda modificar desde cada “productCart” y que afecte a las secciones que nos interesan.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
30
35
38
44
48
49
56
61
Store: State, Getters & Actions
79
81
82
84
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript