Il Global State in Alpine.js: Alpine.store()

È possibile rendere disponibili alcuni dati a tutti i componenti Alpine.js di una pagina registrando un global store. Per registrare uno store si utilizza il metodo Alpine.store(...) e vi si fa riferimento tramite la proprietà magica $store:

<script>
	document.addEventListener('alpine:init', () => {
		Alpine.store('counter', 0)
	})
</script>
<div x-data>
	<p>Counter 1: <span x-text="$store.counter"></span></p>
	<button @click="$store.counter++">Incrementa</button>
	<hr>
	<div x-data>
		<p>Counter 2: <span x-text="$store.counter"></span></p>
		<button @click="$store.counter++">Incrementa</button>
	</div>
</div>

Il global store Alpine.store()

Analizziamo il codice:

• alpine:init è un evento custom inviato da Alpine.js dopo che la libreria è stata caricata e prima che i componenti x-data siano inizializzati. Questo è il momento di inizializzare gli store.
• Alpine.store() crea o accede ad uno store di Alpine.
• counter è il nome dello store, 0 è il valore iniziale.
• Una volta inizializzato lo store, tutti i componenti Alpine della pagina possono accedere ai dati tramite la proprietà $store

Ora, qualunque sia il pulsante su cui l'utente fa clic, il contatore viene incrementato e il nuovo valore viene visualizzato in entrambi i componenti. Nell'esempio che segue utilizziamo il global store per permettere all'utente di visualizzare la pagina in modalità chiara o scura.

<style>
	body {
		transition: background-color 0.3s ease;
	}
	body.dark-theme {
		background-color: #333;
		color: #eee;
	}
	body.light-theme {
		background-color: #ded;
		color: #333;
	}
	button {
		padding: 10px 20px;
		border: none;
		cursor: pointer;
		background-color: #dd7;
	}
</style>
<div x-data>
	<button @click="$store.theme.toggle()">
		Cambia tema
	</button>
	<hr>
	<div x-data>
		<p>Tema corrente: <span x-text="$store.theme.dark ? 'dark' : 'light'"></span></p>
	</div>
</div>
<script>
	document.addEventListener('alpine:init', () => {
		// Inizializza lo store con il tema predefinito ('light')
		Alpine.store('theme', {
			dark: false,
			toggle() {
				this.dark = ! this.dark;
				const body = document.body;
				body.classList.toggle('dark-theme', this.dark);
			}
		});
	});
</script>

• Abbiamo definito lo store theme come un oggetto con una proprietà dark e un metodo toggle();
• dark viene impostato di default a false, mentre il metodo toggle() cambia il valore di dark e assegna la classe dark-theme al body quando dark è true;
• Il pulsante invoca il metodo toggle() dello store per invertire il valore di theme;
• Lo span imposta il testo dark o light a seconda del valore della proprietà dark.

Questo fa sì che il tema della pagina venga aggiornato ogni volta che si invoca il metodo toggle(). Un esempio più elaborato permetterà di avere un'idea più chiara di come funziona il global store di Alpine.

Un carrello della spesa con Alpine.js

Nell'esempio che segue, creiamo un componente del framework JavaScript Alpine per la gestione di un carrello della spesa con due prodotti.

<div x-data>
	<p>Totale articoli nel carrello: <span x-text="$store.cart.items.length"></span></p>
	<button @click="$store.cart.add({ name: 'Prodotto 1', price: 10 })">Aggiungi Prodotto 1</button>
	<button @click="$store.cart.add({ name: 'Prodotto 2', price: 20 })">Aggiungi Prodotto 2</button>
	<ul>
		<template x-for="item in $store.cart.items" :key="item.id">
			<li>
				<span x-text="item.name"></span> - €<span x-text="item.price"></span>
				<button @click="$store.cart.remove(item)">Rimuovi</button>
			</li>
		</template>
	</ul>
</div>
<script>
	document.addEventListener('alpine:init', () => {
		Alpine.store('cart', {
			items: [],
			nextId: 1,
			add(item) {
				item.id = this.nextId++;
				this.items.push(item);
			},
			remove(item) {
				this.items = this.items.filter(i => i.id !== item.id);
			}
		});
	});
</script>

• Alpine.store('cart', {}) definisce lo store globale cart. Questo è composto da un array items, dalla variabile nextId che imposta l'ID iniziale per i prodotti e dalle funzioni add() e remove(), che rispettivamente aggiungono e rimuovono un elemento dell'array;
• $store.cart.items.length mostra il numero degli articoli nel carrello;
• il ciclo for item in $store.cart.items genera un elemento di lista per ogni prodotto nel carrello; :key="item.id" imposta la chiave dell'elemento corrente.

L'immagine che segue mostra il risultato a video.