En artículos anteriores del Manual de Alpine hemos aprendido directivas y ejemplos básicos sobre Alpine que seguramente te habrán permitido comenzar a entender las posibilidades de esta librería y la experiencia de desarrollo que ofrece.

Además, en el artículo de x-data conocimos cómo se trabaja con la directiva principal de Alpine. En esta ocasión vamos a conocer más detalles sobre otra directiva esencial en el framework.

Qué es la directiva x-init

La directiva x-init de Alpine.js se utiliza para ejecutar código JavaScript cuando un componente se inicializa por primera vez. Es útil para realizar acciones o configuraciones justo cuando el componente se carga, como por ejemplo, hacer una llamada API, inicializar variables o realizar alguna consulta de otro tipo en el DOM de la página para extraer alguna información necesaria para trabajar en los componentes de Alpine.js.

Funciona como cualquier otra directiva de Alpine, usándola como un atributo del HTML y colocando como valor aquel código que queremos ejecutar para su inicialización.

<div x-data="{ message: '' }" x-init="message = 'Hello, world!'">
     <p x-text="message"></p>
</div>

En este caso, la variable message se declara como una cadena vacía pero se inicializa con el valor "Hello, world!" cuando el componente se carga.

Ejemplo de uso de x-init

Vamos a ver algunos ejemplos de uso de la directiva x-init con diversas alternativas de funcionamiento y organización del código. Veremos varios enfoques sobre cómo podemos proceder para inicializar algunos datos vía conexiones Ajax, un caso de uso bastante frecuente de x-init.

<div x-data="{ countries: [] }" x-init="countries = (await (await fetch('https://timer.escuelait.com/api/countries')).json()).data">
    <div x-show="countries.length == 0">No tenemos países</div>
    <div x-show="countries.length > 0">Tenemos <span x-text="countries.length"></span> países</div>
</div>

En este caso, la variable countries se declara asingando un array vacío. Luego, cuando se carga el componente, se realiza una consulta Ajax con Fetch para traerse los datos de los países desde un servicio web (API REST). Esos datos de países se asignan a la variable countries.

Usar el método init de x-data

Coincidirás con nosotros que ese modo de inicializar los datos no es demasiado claro en un ejemplo como el que acabamos de ver, ya que meter todo un comportamiento Ajax asíncrono metido en el valor de un atributo dificulta mucho la lectura. Es por ello que podemos introducir en el x-data un método init() para realizar las mismas operaciones de inicialización.

<div x-data="{ 
    countries: [],
    async init() {
      const response = await fetch('https://timer.escuelait.com/api/countries');
      const json = await response.json();
      this.countries = json.data;
    }
    }">
    <div x-show="countries.length == 0">No tenemos países</div>
    <div x-show="countries.length > 0">Tenemos <span x-text="countries.length"></span> países</div>
</div>

El ejemplo hace exactamente lo mismo, pero en este segundo caso podemos leer el código de inicialización de forma mucho más clara.

Usando el manejador alpine:init

A veces resulta poco práctico programar en el HTML, por varios motivos, como la reutilización y la organización del código. Es por ello que todavía podemos mejorar nuestro ejemplo con una técnica que no llegamos a ver en el artículo de x-data pero que ahora es muy relevante.

Se trata de escribir el código del x-data de manera independiente, en un script Javascript separado.

<div x-data="paises">
    <div x-show="countries.length == 0">No tenemos países</div>
    <div x-show="countries.length > 0">Tenemos <span x-text="countries.length"></span> países</div>
</div>

<script>
    document.addEventListener('alpine:init', () => {
      Alpine.data('paises', () => ({
        countries: [],
        async init() {
          const response = await fetch('https://timer.escuelait.com/api/countries');
          const json = await response.json();
          this.countries = json.data;
        }
      }))
    })
</script>

Si te fijas, ahora el x-data se define solamente con un identificador: x-data="paises". Luego aparte, en el script, se usa ese mismo identificador en el método Alpine.data() para especificar los datos y comportamientos asociados a este componente.

Gracias a esta tercera alternativa que podríamos reutilizar el código entre páginas fácilmente, ya que podríamos alojar ese mismo script en un fichero aparte. Además gracias a esta organización el editor de código podrá ayudarnos con el resaltado de sintaxis y el intellisense al escribir los comportamientos Javascript.

Conclusión sobre x-init

En resumen, x-init te permite ejecutar cualquier código JavaScript necesario al inicio del ciclo de vida del componente en Alpine.js. Hemos aprendido un ejemplo típico de acceso a un servicio web y lo hemos visto aplicar mediante tres enfoques distintos, cada uno de ellos con unas prestaciones distintas, para ayudarnos a la hora de escribir y mantener el código de los componentes Alpine.