🔍 Cara Mengakses x-data dari Luar Komponen Alpine.js (Tanpa Alpine.store)

Secara default, data yang kamu deklarasikan di dalam x-data hanya bisa diakses oleh elemen tempat x-data itu di-mount dan turunannya. Misalnya:

<body>
  <header x-data="{ title: 'AlpineJS Awesome' }" x-text="title"></header>
  <main>Isi Content</main>
  <footer>Footer</footer>
</body>

Di contoh di atas, kamu nggak bisa akses title dari elemen <footer>. Data tersebut hanya hidup di <header> dan child-nya saja.

🤔 Solusi Umum: Pindahkan ke Atas
Solusi pertama yang terlintas biasanya: pindahkan x-data ke parent-nya, misalnya ke <body>. Tapi ini bisa menjebak kamu dalam prop drilling hell — seperti di React, data harus "diturunkan" manual ke banyak anak komponen. 😩

💡 Solusi Lebih Baik: Gunakan Global Store
Alpine punya built-in global store bernama Alpine.store, mirip dengan context di React. Cocok untuk data global yang sering diakses dari berbagai tempat.

Tapi… kadang kita nggak butuh global, cuma pengen "sesekali" ubah state dari luar komponen.

Nah, artikel ini akan membahas 3 alternatif cara mengakses atau memanipulasi data x-data dari luar komponen tanpa harus pakai store.

🧪 1. Passing $data ke Fungsi JavaScript

Alpine punya binding $data yang berisi semua properti dalam x-data. Kamu bisa lempar $data ke fungsi eksternal dan ubah di sana.

<!-- index.html -->
<header x-data="{ title: "'AlpineJS Suck' }\">"
  <p x-text="title"></p>
  <button @click="setTitle($data)">Change Title</button>
</header>

// script.js
function setTitle(data) {
  data.title = 'AlpineJS Awesome';
}

📝 Cocok untuk: ketika ingin mengubah data Alpine dari file JavaScript biasa.

🧪 2. Manipulasi via Alpine.$data()

Trik ini tidak terdokumentasi resmi, tapi dibahas oleh salah satu maintainer di artikel Underrated Alpine API Features.

<header x-data="{ title: 'AlpineJS Suck' }" id="header">
  <p x-text="title"></p>
</header>

<button id="trigger">Change from Outside</button>

const header = document.querySelector('#header');
const trigger = document.querySelector('#trigger');

trigger.addEventListener('click', () => {
  Alpine.$data(header).title = 'AlpineJS Awesome';
});

📌 Kuncinya: Alpine.$data(el) akan mengembalikan data dari elemen Alpine yang dimaksud.

🧪 3. Mengakses dari Komponen Lain

Misalnya kamu punya komponen lain (misalnya di <main>) yang ingin mengubah data di <header>.

<header x-data="{ title: 'AlpineJS Suck' }" id="header">
  <p x-text="title"></p>
</header>

<main>
  <div x-data="{
    updateTitle() {
      Alpine.$data(document.querySelector('#header')).title = 'AlpineJS Awesome';
    }
  }">
    <button @click="updateTitle">Update Title</button>
  </div>
</main>

💡 Fun fact: Kalau kamu pakai id="header", maka header langsung jadi variabel global di JS (di banyak browser modern). Jadi kode tadi bisa disingkat:

Alpine.$data(header).title = 'AlpineJS Awesome';

🧪 Bonus Demo

Lihat demo lengkapnya di sini 👉 https://iCodeThis.com/code/3972

✍️ Penutup

Kalau kamu cuma butuh akses data Alpine secara ringan dari luar komponen, gunakan teknik $data atau Alpine.$data() ini. Lebih fleksibel daripada harus memindahkan semuanya ke store.

Tapi kalau kamu butuh state global yang diakses dari banyak tempat, tetap gunakan Alpine.store ya!

🚀 Semoga tips ini bermanfaat. Kalau kamu punya cara lain atau pengalaman menarik seputar Alpine, share di komentar!

Sampai jumpa di tulisan selanjutnya 👋

Eris Sulistina @sejutaimpian