$store

Vous pouvez utiliser $store pour accéder facilement aux stores Alpine globaux enregistrés avec Alpine.store(...). Par exemple :

<button x-data @click="$store.darkMode.toggle()">Basculer le mode sombre</button>

...

<div x-data :class="$store.darkMode.on && 'bg-black'">
    ...
</div>


<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('darkMode', {
            on: false,

            toggle() {
                this.on = ! this.on
            }
        })
    })
</script>

Puisque nous avons enregistré le store darkMode avec on à « false », lorsque vous appuyez sur le <button>, on devient « true » et la couleur de fond de la page passe au noir.

Stores à valeur unique

Si vous n'avez pas besoin d'un objet entier pour un store, vous pouvez définir et utiliser n'importe quel type de donnée comme store.

Voici l'exemple précédent, utilisé plus simplement avec une valeur booléenne :

<button x-data @click="$store.darkMode = ! $store.darkMode">Basculer le mode sombre</button>

...

<div x-data :class="$store.darkMode && 'bg-black'">
    ...
</div>


<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('darkMode', false)
    })
</script>

→ En savoir plus sur les stores Alpine

Traduction française de la documentation officielle d'Alpine.js (licence MIT) – https://alpinejs.dev