¡Suscríbete y continúa aprendiendo!

Esta lección está disponible únicamente para suscriptores.

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.

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 pregunta

¡Comparte conocimiento!

X

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos


























26

Composition API: Estado


































































































Espera un momento ...

¿Te gustaría llevar mi curso de Laravel, gratis?

Sólo debes ingresar tus datos: