TypeScript / Vue – Estado de componente

Bienvenidos sean a este post, hoy veremos una particularidad de los componentes.

En el post anterior vimos como trabajar con componentes hijos y las props para poder pasar informacion entre ellos. Una cosa que no mencionamos anteriormente, es que las propiedades que un componente expone a un componente padre son de solo lectura. Esto implica que solo los componentes padres pueden modificar estas propiedades, manejando el flujo de datos en un solo sentido, del padre a los hijos. Pero que sucede si nuestro componente necesita mantener su propio estado y actualizar una propiedad interna? Para esta situacion, los componentes Vue usan una funcion llamada data que nos devuelve una estructura para almacenar el estado interno. Para aplicar esto que comentamos vamos a crear un nuevo proyecto, para ello ejecuten el siguiente comando:

$ vue create ejemplo04

Este iniciara el proceso de creacion, sino vienen de los posts anteriores y no poseen el perfil con las opciones para nuestros proyectos deben elegir la opcion manual y elegir las siguientes opciones:

1. typescript (solamente)
2. 3.x
3. Use class-style component syntax? yes
4. Use babel alongside? no
5. dedicated config files
6. Save this as a preset for future projects? yes

Con nuestra aplicacion creada, ingresemos al directorio con el nombre de la aplicacion y aqui iremos al directorio src y crearemos un nuevo archivo con el nombre de Estado.vue y le agregaremos el siguiente codigo:

src/Estado.vue

<template>
        <p>{{ titulo }}</p>
        <input type="text" v-model="miTexto"/>
        <button v-on:click="cliqueado()">Submit</button>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
        props: {
          titulo: String,
          msj: String
        }
})
export default class Estado extends Vue {
        titulo!: string;
        msj!: string;
        miTexto!: string;
        data() {
                return {
                  miTexto: this.msj
                }
        }
        cliqueado() {
          console.log(`this.miTexto=${this.miTexto}`);
        }
}
</script>
<style scoped></style>

Analicemos primero el template, en este tenemos un parrafo que mostrara la propiedad titulo, luego tenemos un elemento de tipo input. Este sera de tipo text, pero tiene un atributo particular como es v-model. Este atributo nos permite unir este elemento con la propiedad miTexto, lo cual nos permitira manipular el valor de este elemento con nuestro codigo. Por ultimo tenemos un boton donde mediante el atributo v-on lo asociaremos al evento click y este ejecutara la funcion cliqueado. Pasemos a hablar sobre la seccion de script.

Primero importaremos los modulos basicos necesarios, el primero es para Options y el segundo es para generar al componente de Vue. En el decorador Options definiremos dos propiedades, siendo titulo para mostrarla en el template y la segunda la usaremos con el data. Despues tenemos la exportacion de nuestra clase que sera nuestro componente de Vue. Lo primero que haremos sera declarar tres propiedades y le aplicamos el operador de asignacion definitiva para permitir tener valores null o undefined. Lo siguiente es el uso de data, este nos permite enviar informacion a los elementos que unimos mediante v-model. Para este caso el input, y cualquier texto que pasemos con esa propiedad sera asignado. Por ultimo, tenemos la funcion para el evento click y este mostrara en consola el valor que ingresamos en el input. El ultimo parametro lo dejamos asi porque no necesitamos aplicar nada. Nuestro siguiente paso sera ir a App.vue en src y modificaremos el codigo de la siguiente manera:

src/App.vue

<template>
        <Estado titulo="Estado de un componente"></Estado>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import Estado from './Estado.vue';

@Options({
  components: {
    Estado,
  },
})
export default class App extends Vue {}
</script>

<style scoped></style>

En el template llamaremos al componente que definimos anteriormente, en este caso pasamos la propiedad de titulo para mostrarlo en el navegador y msj no lo pasamos para que el input este en blanco. En la seccion de script importaremos el componente creado anteriormente. En Options estableceremos al componente hijo que utilizaremos en el template, si hubiera mas se deben declarar en esta propiedad, y por ultimo exportaremos la clase como un componente de Vue. Si ejecutan la aplicacion mediante el comando npm run serve y abren un browser, la aplicacion se vera de la siguiente manera:

Como pueden ver tenemos los elementos que configuramos, asi como tambien vemos como se pasaran las propiedades. Si ingresamos un texto y presionamos el boton no veremos nada, en la pagina pero si vamos a la consola del navegador veremos lo siguiente

Como pueden ver se envio la informacion mediante la funcion relacionada al evento click. Observen como de una manera sencilla pudimos manejar el estado de un elemento, por ejemplo si en el template de App.vue agregan la propiedad msj al llamado del componente Estado, veran como este es pasado al input.

En resumen, hoy hemos visto el estado de un componente, como es, para que sirve, como se aplica, un ejemplo practico para ver este y otros temas. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.