Alpine.store()

Alpine offre une gestion d'état global grâce à l'API Alpine.store().

Enregistrer un store

Vous pouvez définir un store Alpine à l'intérieur d'un écouteur alpine:init (lorsqu'Alpine est inclus via une balise <script>), OU le définir avant d'appeler manuellement Alpine.start() (lorsqu'Alpine est importé dans un build) :

Depuis une balise script :

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

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

Depuis un bundle :

import Alpine from 'alpinejs'

Alpine.store('darkMode', {
    on: false,

    toggle() {
        this.on = ! this.on
    }
})

Alpine.start()

Accéder aux stores

Vous pouvez accéder aux données de n'importe quel store dans les expressions Alpine avec la propriété magique $store :

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

Vous pouvez aussi modifier les propriétés du store, et tout ce qui en dépend réagira automatiquement. Par exemple :

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

De plus, vous pouvez accéder à un store depuis l'extérieur avec Alpine.store() en omettant le second paramètre, comme ceci :

<script>
    Alpine.store('darkMode').toggle()
</script>

Initialiser les stores

Si vous fournissez une méthode init() dans un store Alpine, elle sera exécutée juste après l'enregistrement du store. C'est utile pour initialiser l'état du store avec des valeurs de départ pertinentes.

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('darkMode', {
            init() {
                this.on = window.matchMedia('(prefers-color-scheme: dark)').matches
            },

            on: false,

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

Remarquez la méthode init() ajoutée dans l'exemple ci-dessus. Grâce à elle, la variable de store on est définie selon la préférence de schéma de couleurs du navigateur avant qu'Alpine n'affiche quoi que ce soit dans la page.

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>

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