DEV Community

Eris Sulistina
Eris Sulistina

Posted on

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

#webdev #alpinejs #javascript #indonesia

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
// script.js
function setTitle(data) {
  data.title = 'AlpineJS Awesome';
}
Enter fullscreen mode Exit fullscreen mode

📝 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>
Enter fullscreen mode Exit fullscreen mode 
const header = document.querySelector('#header');
const trigger = document.querySelector('#trigger');

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

📌 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>
Enter fullscreen mode Exit fullscreen mode

💡 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';
Enter fullscreen mode Exit fullscreen mode

🧪 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 👋

Top comments (0)