État

L'état (les données JavaScript qu'Alpine surveille) est au cœur de tout ce que vous faites dans Alpine. Vous pouvez fournir des données locales à un morceau de HTML avec x-data, ou les rendre globalement disponibles n'importe où dans la page avec Alpine.store().

État local

Alpine vous permet de déclarer l'état d'un bloc HTML dans un seul attribut x-data, sans jamais quitter votre balisage.

Voici un exemple basique :

<div x-data="{ open: false }">
    ...
</div>

Désormais, toute autre syntaxe Alpine placée sur cet élément ou à l'intérieur peut accéder à open. Et comme vous pouvez le deviner, lorsque open change pour une raison quelconque, tout ce qui en dépend réagit automatiquement.

→ En savoir plus sur x-data

Imbriquer les données

Les données sont imbriquables dans Alpine. Par exemple, si deux éléments portent des données Alpine (l'un à l'intérieur de l'autre), vous pouvez accéder aux données du parent depuis l'élément enfant.

<div x-data="{ open: false }">
    <div x-data="{ label: 'Contenu :' }">
        <span x-text="label"></span>
        <span x-show="open"></span>
    </div>
</div>

C'est semblable à la portée (scope) en JavaScript : le code d'une fonction peut accéder aux variables déclarées en dehors de cette fonction.

Comme vous l'avez sans doute deviné, si l'enfant possède une propriété de même nom qu'une propriété du parent, la propriété de l'enfant a la priorité.

Données sur un seul élément

Cela peut sembler évident, mais il est utile de préciser que les données Alpine peuvent être utilisées sur le même élément. Par exemple :

<button x-data="{ label: 'Cliquez ici' }" x-text="label"></button>

Alpine sans données

Parfois, vous voulez utiliser des fonctionnalités d'Alpine sans avoir besoin de données réactives. Dans ce cas, vous pouvez simplement ne passer aucune expression à x-data. Par exemple :

<button x-data @click="alert('On a cliqué sur moi !')">Cliquez-moi</button>

Données réutilisables

Avec Alpine, vous pouvez avoir besoin de réutiliser un bloc de données et/ou le template correspondant.

Si vous utilisez un framework back-end comme Rails ou Laravel, Alpine recommande d'abord d'extraire tout le bloc HTML dans un partiel ou un include de template.

Si, pour une raison quelconque, cela ne vous convient pas ou si vous n'êtes pas dans un environnement de templates côté serveur, Alpine permet d'enregistrer globalement et de réutiliser la partie données d'un composant avec Alpine.data(...).

Alpine.data('dropdown', () => ({
    open: false,

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

Maintenant que vous avez enregistré les données « dropdown », vous pouvez les utiliser dans votre balisage à autant d'endroits que vous voulez :

<div x-data="dropdown">
    <button @click="toggle">Déplier</button>

    <span x-show="open">Contenu...</span>
</div>

<div x-data="dropdown">
    <button @click="toggle">Déplier</button>

    <span x-show="open">Un autre contenu...</span>
</div>

→ En savoir plus sur l'utilisation d'Alpine.data()

État global

Si vous souhaitez rendre certaines données disponibles pour tous les composants de la page, vous pouvez utiliser la fonctionnalité de « store global » d'Alpine.

Vous enregistrez un store avec Alpine.store(...) et vous y faites référence avec la méthode magique $store().

Prenons un exemple simple. Enregistrons d'abord le store globalement :

Alpine.store('tabs', {
    current: 'first',

    items: ['first', 'second', 'third'],
})

Nous pouvons maintenant accéder à ses données, ou les modifier, depuis n'importe où dans la page :

<div x-data>
    <template x-for="tab in $store.tabs.items">
        ...
    </template>
</div>

<div x-data>
    <button @click="$store.tabs.current = 'first'">Premier onglet</button>
    <button @click="$store.tabs.current = 'second'">Deuxième onglet</button>
    <button @click="$store.tabs.current = 'third'">Troisième onglet</button>
</div>

→ En savoir plus sur Alpine.store()

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