di beberapa tutorial alpinejs biasanya contohnya meletakkan variabel dan function sebagai attribut tag div. ini menjadi tidak masalah jika variabel hanya sedikit dengan logika function yang sederhana. kira-kira seperti ini

<div x-data="{
    nama:'',
    alamat:'',
    registrasi(){
      console.log('save')
    },
    delete(id){
      console.log(id)
    }
  }" x-init="initDataTraining()">
  <p>Konten Utma</p>
</div>

<div x-data="{
    nama:'',
    alamat:'',
    registrasi(){
      console.log('save')
    },
    delete(id){
      console.log(id)
    }
  }" x-init="initDataTraining()">
  <p>Konten Utma</p>
</div>

bayangkan jika kode diatas memilki banyak variabel dengan logika function yang banyak misal menerapkan ajax.

maka solusinya kita letakkan kode alpinejs di tag script yang dibungkus dengan function. dan faunction tersebut dipanggil di x-data. berikut contohnya

<div x-data="indexKomponen()" x-init="initDataTraining()">
  <p>Konten Utma</p>
</div>

<script>
  function indexKomponen(){
    return {
      nama:'',
      alamat:'',
      registrasi(){
        console.log('save')
      },
      delete(id){
        console.log(id)
      }
    }
  }
</script>

<div x-data="indexKomponen()" x-init="initDataTraining()">
  <p>Konten Utma</p>
</div>

<script>
  function indexKomponen(){
    return {
      nama:'',
      alamat:'',
      registrasi(){
        console.log('save')
      },
      delete(id){
        console.log(id)
      }
    }
  }
</script>

Dengan begini kode kita menjadi lebih rapi sekalipun banyak variabel dan logika function yang kompleks

Dan bagi yang familiar dengan vue ini akan sangat memudahkan karena dari yang saya baca developer alpinejs memang terinspirase dari vue.

ini hanya setup awal saja. untuk detail cara menggunakan vite kunjungi web resminya

Bagaimana cara kerja "Reaktif" di alpinejs

Di flutter ada namanya initState, setiap dipanggil flutter akan melakukan reload. dan "initState" -nya alpinejs adalah setiap ada perubahan nilai pada variabel umum (variabel yang diakses dengan "this") maka alpinejs akan melakukan "reaktif"

disinilah letak kemewahan dari alpinejs. simple tapi bisa reaktif laiknya framework besar seperti vue dan react.

tapi kekurangan yang saya tahu sampai artikel ini ditulis alpinejs tidak bisa berbagi data antara child page dan parent page begitu juga sebaliknya. tapi tenang ada triknya dengan x-ref yaitu barbagi data ala-ala jquery dengan menggunakan mengakses DOM