Sebelumnya sudah kita bahas mengenai komunikasi antar parent ke child dan sebaliknya menggunakan x-ref dan $dispatch di artikel ini

Sekarang kita akan bahas $store yang bisa menhandle tugas diatas dengan kemampuan yang bisa memicu reaktif.

Lalu apa kekurangannya ? jangan pernah menyimpan data di store yang sangat dinamis perubahannya. seperti :

• Komponen yang merespons drag-and-drop
• Slider atau range input yang terus bergerak
• Validasi form yang terjadi setiap karakter diketik.

Kenapa tidak cocok di $store ?

Karena $store cocok untuk shared state yang stabil atau berubah secara terkontrol. apa akibatnya jika tetap menggunkannya ?

• Overhead re-rendering di banyak komponen.
• Sulit dilacak karena semua komponen ikut bereaksi.
• Potensi konflik jika banyak komponen mengubah data secara bersamaan.

Jika diringkas penyebab utama 3 problem diatas adalah karena $store bisa memicu reaktif

Berikut cara menggunakan store untuk tujuan komunikasi parent ke child dan sebaliknya

Inisialisasi Store

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.store('shared', {
      message: 'Halo dunia',
      setMessage(msg) {
        this.message = msg;
      }
    });
  });
</script>

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.store('shared', {
      message: 'Halo dunia',
      setMessage(msg) {
        this.message = msg;
      }
    });
  });
</script>

Parent Component

<div x-data>
  <h1 x-text="$store.shared.message"></h1>
  <button @click="$store.shared.setMessage('Dari parent')">Ubah dari Parent</button>

  <x-child-comp />
</div>

<div x-data>
  <h1 x-text="$store.shared.message"></h1>
  <button @click="$store.shared.setMessage('Dari parent')">Ubah dari Parent</button>

  <x-child-comp />
</div>

Child Component

<div x-data>
  <p x-text="$store.shared.message"></p>
  <button @click="$store.shared.setMessage('Dari child')">Ubah dari Child</button>
</div>

<div x-data>
  <p x-text="$store.shared.message"></p>
  <button @click="$store.shared.setMessage('Dari child')">Ubah dari Child</button>
</div>

Hasilnya :

• Saat parent atau child mengubah $store.shared.message, semua komponen yang mengaksesnya akan langsung update.
• Tidak perlu $dispatch, tidak perlu x-ref, dan tidak perlu manipulasi DOM manual

Tips :

• Gunakan $store untuk data yang dipakai banyak komponen: status login, tema, notifikasi, dll.
• Hindari menyimpan data yang sangat besar atau sangat dinamis di $store.

Penutup

Sebantar.... sepertinya inisialisasi store memiliki kemiripan dengan x-data ya... yaitu sama-sama memilki data dan function. Bedanya di scope nya ya.... benarkah ? yap benar sekali berikut perbedaanya :