Vue Academy · Pelajaran

State Bersama di Seluruh Micro-Frontend

Berbagi store Pinia, bus event melalui CustomEvent, serta URL sebagai state bersama.

State Bersama di Seluruh Micro-Frontend adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Tantangan State Bersama

Mikro-frontend yang mandiri tetap perlu berkoordinasi: login di satu irisan harus memperbarui header di irisan lain. Namun, keterikatan yang erat menggagalkan tujuan tersebut. Sasarannya adalah komunikasi yang longgar dan disengaja.

Hindari State Global Implisit

Menumpuk semuanya pada window atau penyimpanan bersama yang besar akan menciptakan kembali keterikatan monolit. Utamakan kontrak yang eksplisit dan minimal antaririsan agar tim dapat berkembang secara mandiri.

CustomEvent untuk Komunikasi

API CustomEvent peramban adalah saluran komunikasi yang tidak bergantung pada kerangka kerja. Satu mikro-frontend mengirimkan peristiwa pada window; mikro-frontend lainnya mendengarkan—tanpa memerlukan impor bersama.

const event = new CustomEvent("cart:add", {
  detail: { productId: 42, qty: 1 },
})
window.dispatchEvent(event)

Mendengarkan Peristiwa

Irisan lain berlangganan dengan addEventListener dan membaca muatan dari event.detail. Hal ini memisahkan pengirim dan penerima—keduanya hanya perlu menyepakati nama dan struktur peristiwa.

window.addEventListener("cart:add", (e) => {
  console.log("Added", e.detail.productId)
})

Membersihkan Pendengar di Vue

Daftarkan pendengar dalam onMounted dan hapus dalam onUnmounted untuk menghindari kebocoran serta penangan duplikat ketika komponen dipasang ulang.

import { onMounted, onUnmounted } from "vue"

function onAdd(e) { /* ... */ }
onMounted(() => window.addEventListener("cart:add", onAdd))
onUnmounted(() => window.removeEventListener("cart:add", onAdd))

Kontrak Peristiwa Bertipe

Dokumentasikan peristiwa sebagai kontrak agar setiap tim mengetahui nama dan struktur muatannya. Inilah API publik antar-mikro-frontend.

// events contract
// "cart:add"    -> { productId: number, qty: number }
// "auth:login"  -> { userId: string }
// "auth:logout" -> {}

URL sebagai State Bersama

URL adalah penyimpanan bersama yang alami untuk navigasi dan penyaring: sifatnya global, dapat dijadikan penanda, dan dapat dibaca oleh setiap irisan. Letakkan state lintas fitur seperti penyaring aktif atau halaman dalam params kueri.

const params = new URLSearchParams(location.search)
const category = params.get("category") // shared across slices

Memperbarui State URL

Tuliskan state penyaring dan navigasi bersama ke URL dengan API Riwayat agar tetap mudah dibagikan dan mendukung tombol kembali. Semua irisan bereaksi dengan membaca URL yang baru.

function setCategory(value) {
  const url = new URL(location.href)
  url.searchParams.set("category", value)
  history.pushState({}, "", url)
}

Penyimpanan Pinia Tunggal

Untuk state bersama yang lebih kaya dalam satu halaman, penyimpanan Pinia tunggal dapat digunakan—tetapi hanya jika Pinia dibagikan sebagai satu instans melalui federasi sehingga semua irisan menggunakan instans yang sama.

// federation config (both sides)
shared: {
  pinia: { singleton: true },
  vue: { singleton: true },
}

Menggunakan Penyimpanan Bersama

Dengan Pinia yang dibagikan sebagai satu instans, penyimpanan yang diimpor oleh dua irisan merupakan instans penyimpanan yang sama—state yang ditulis oleh satu irisan dibaca secara reaktif oleh irisan lainnya.

// slice A writes
const auth = useAuthStore()
auth.login(user)

// slice B reads the same reactive state
const auth = useAuthStore()
console.log(auth.user)

Memilih Strategi

CustomEvent — notifikasi longgar yang tidak bergantung pada kerangka kerja.
URL — navigasi, penyaring, dan apa pun yang dapat dibagikan atau dijadikan penanda.
Penyimpanan Pinia tunggal — state reaktif yang kaya dalam halaman, memerlukan singleton: true.

Pilih opsi paling longgar yang memenuhi kebutuhan.

Pemeriksaan Singkat

Periksa pemahaman Anda tentang state lintas-MFE.

Rangkuman

Anda telah mempelajari cara berbagi state antar-mikro-frontend:

Utamakan kontrak yang longgar dan eksplisit daripada state global implisit.
CustomEvent pada window bersama addEventListener menyediakan pesan yang tidak bergantung pada kerangka kerja; bersihkan dalam onUnmounted.
URL (params kueri melalui API Riwayat) menyimpan state navigasi dan penyaring yang dapat dibagikan.
Penyimpanan Pinia tunggal membagikan state reaktif yang kaya, tetapi hanya dengan singleton: true dalam federasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “State Bersama di Seluruh Micro-Frontend” gratis?

Ya — teks lengkap “State Bersama di Seluruh Micro-Frontend” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “State Bersama di Seluruh Micro-Frontend”?

Berbagi store Pinia, bus event melalui CustomEvent, serta URL sebagai state bersama. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “State Bersama di Seluruh Micro-Frontend” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy