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
Composition API: Estado
Veamos cómo definir el estado de un componente usando Composition API.
Creación de etiquetas
Tenemos una etiqueta template y vamos a crear una etiqueta script.
La diferencia es que en este caso vamos a agregar el atributo setup, que es necesario para trabajar con Composition API.
Definición de una variable de estado
Lo primero que vamos a hacer es definir una variable count, como hicimos anteriormente.
Para poder definir variables de estado, tenemos que importar la función ref desde Vue.
Entonces, vamos a crear ahora nuestra variable count y vamos a definirla usando ref.
Le tenemos que indicar aquí cuál es su valor inicial, en este caso, 0.
Modificación del template
Vamos a cambiar este texto por un párrafo y vamos a agregar un h1 con el valor del contador.
Vamos a imprimir aquí count.
Hasta aquí todo es muy similar: estamos imprimiendo el valor de la variable count, y count se define usando la función ref.
Si volvemos al navegador, veremos el valor 0.
Agregar un botón para incrementar el contador
Tal como hicimos antes, vamos a agregar ahora un botón. Este botón tendrá como texto "Incrementar contador".
Guardamos hasta aquí. El botón no hace nada porque no tiene ningún evento asociado.
Vamos a asociarle un evento de click a nuestro botón y vamos a aumentar el valor de count en 1.
Guardamos cambios, nos vamos al navegador y usamos el botón. ¡Ya funciona!
Uso de TypeScript
Hasta aquí todo bien y ya estamos usando Composition API.
Como en nuestro proyecto queremos usar TypeScript, es importante también agregar aquí el atributo lang="ts".
En caso contrario, nos marcará un warning.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Tenemos una etiqueta template y vamos a crear una etiqueta script. La diferencia es que en este caso vamos a agregar el atributo setup que es necesario para trabajar con Composition API. Lo primero que vamos a hacer es definir una variable "count", como hicimos anteriormente. Para poder definir variables de estado, tenemos que importar la función "ref" desde Vue. Entonces vamos a crear ahora nuestra variable "count" y vamos a definir lo usando "ref", le tenemos que indicar aquí cuál es su valor inicial. En este caso, cero. Vamos a cambiar este texto por un párrafo y vamos a agregar un H1 con el valor del contador. Vamos a imprimir aquí "count". Hasta aquí todo es muy similar. Estamos imprimiendo aquí el valor de la variable "count" y "count" se define usando la función "ref". Si volvemos a el navegador, vamos a ver aquí el valor de cero. Tal como hicimos antes, vamos a agregar ahora un botón. Este botón lo vamos a poner como texto “incrementar contador”. Guardamos hasta aquí. El botón no hace nada porque no tiene ningún evento asociado. Vamos a asociarle un evento de click a nuestro botón y vamos a aumentar el valor de "count" en 1. Guardamos cambios, nos vamos al navegador y usamos el botón. Ya funciona. Hasta aquí todo bien y ya estamos usando Composition API. Como en nuestro proyecto queremos usar TypeScript, es importante también agregar aquí el atributo “lang=ts”, en el caso contrario nos marcaron un warning.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
26
Composition API: Estado
30
35
38
44
48
49
56
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