Reactividad y estado

Reactividad y estado

Alpine.js permite definir y manipular el estado reactivo directamente en el HTML usando x-data y otras directivas.

¿Cómo funciona la reactividad en Alpine.js?

Alpine.js utiliza un sistema reactivo similar al de frameworks modernos, pero directamente en el HTML. Cuando defines datos con x-data, cualquier cambio en esos datos se refleja automáticamente en la interfaz.

Definiendo estado reactivo

Contador reactivo

<div x-data="{ contador: 0 }">
<button @click="contador++">Incrementar</button>
<span x-text="contador"></span>
</div>

En este ejemplo, contador es reactivo: cada vez que haces clic en el botón, el valor mostrado se actualiza automáticamente.

Reactividad con x-model

Enlace bidireccional con x-model

<div x-data="{ nombre: '' }">
<input x-model="nombre" placeholder="Escribe tu nombre" />
<p>Hola, <span x-text="nombre"></span>!</p>
</div>

El input y el texto están sincronizados: cualquier cambio en el input se refleja en el estado y viceversa.

Computed properties (propiedades derivadas)

Puedes usar funciones dentro de x-data para crear propiedades derivadas:

Propiedad computada

<div x-data="{ a: 2, b: 3, get suma() { return this.a + this.b } }">
<span x-text="suma"></span>
</div>

Observando cambios con $watch

Alpine.js permite observar cambios en propiedades usando $watch:

Uso de $watch

<div x-data="{ mensaje: '' }" x-init="$watch('mensaje', value => console.log(value))">
<input x-model="mensaje" placeholder="Escribe algo" />
</div>

Tip

Consulta la documentación oficial para más detalles sobre la reactividad y el manejo de estado en Alpine.js.