Vue Academy · Pelajaran

Keadaan Dikongsi Merentas Mikro-Frontend

Berkongsi stor Pinia, bas peristiwa melalui CustomEvent, URL sebagai keadaan dikongsi.

Pelajaran 4 daripada 413 langkah

Keadaan Dikongsi Merentas Mikro-Frontend ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Cabaran state Dikongsi

Mikro-frontend yang bebas masih perlu berkoordinasi: login dalam satu bahagian sepatutnya mengemas kini pengepala dalam bahagian lain. Namun, gandingan yang ketat menafikan tujuan tersebut. Matlamatnya ialah komunikasi yang longgar dan disengajakan.

Elakkan state Global Tersirat

Meletakkan segala-galanya pada window atau dalam stor dikongsi yang besar akan mengembalikan gandingan monolit. Utamakan kontrak yang jelas dan minimum antara bahagian supaya pasukan boleh berkembang secara bebas.

CustomEvent untuk Komunikasi

API CustomEvent pelayar ialah bas yang bebas rangka kerja. Satu mikro-frontend menghantar acara pada window; yang lain mendengarnya — tiada import dikongsi diperlukan.

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

Mendengar Acara

Bahagian lain melanggan dengan addEventListener dan membaca muatan daripada event.detail. Ini menyahgandingkan pengirim dan penerima — mereka hanya perlu bersetuju tentang nama dan bentuk acara.

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

Membersihkan Pendengar dalam Vue

Daftarkan pendengar dalam onMounted dan buangkannya dalam onUnmounted untuk mengelakkan kebocoran serta pengendali pendua apabila komponen dipasang semula.

import { onMounted, onUnmounted } from "vue"

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

Kontrak Acara Berjenis

Dokumentasikan acara sebagai kontrak supaya setiap pasukan mengetahui nama dan bentuk muatannya. Inilah API awam antara mikro-frontend.

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

URL sebagai state Dikongsi

URL ialah stor dikongsi semula jadi untuk navigasi dan penapis: ia global, boleh ditanda buku dan setiap bahagian boleh membacanya. Letakkan state merentas fungsi seperti penapis aktif atau halaman dalam params pertanyaan.

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

Mengemas Kini state URL

Tulis state penapis dan navigasi yang dikongsi pada URL menggunakan API Sejarah supaya ia kekal boleh dikongsi dan serasi dengan butang kembali. Semua bahagian bertindak balas dengan membaca URL yang baharu.

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

Stor Pinia Tunggal

Untuk state dikongsi yang lebih kaya dalam satu halaman, stor Pinia tunggal boleh digunakan — tetapi hanya jika Pinia dikongsi sebagai tunggal merentas federasi supaya semua bahagian menggunakan instans yang sama.

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

Menggunakan Stor Dikongsi

Dengan Pinia dikongsi sebagai tunggal, stor yang diimport oleh dua bahagian ialah instans stor yang sama — state yang ditulis oleh satu bahagian dibaca oleh bahagian lain secara reaktif.

// 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 — pemberitahuan yang longgar dan bebas rangka kerja.
URL — navigasi, penapis dan apa sahaja yang boleh dikongsi atau ditanda buku.
Pinia Tunggal — state reaktif dalam halaman yang kaya, memerlukan singleton: true.

Utamakan pilihan paling longgar yang memenuhi keperluan.

Semakan Ringkas

Semak pemahaman anda tentang state merentas MFE.

Jawab dalam pelajaran interaktif

Ringkasan

Anda telah mempelajari cara berkongsi state merentas mikro-frontend:

Utamakan kontrak yang longgar dan jelas berbanding state global yang tersirat.
CustomEvent pada window bersama addEventListener menyediakan pemesejan bebas rangka kerja; bersihkannya dalam onUnmounted.
URL (params pertanyaan melalui API Sejarah) menyimpan state navigasi dan penapis yang boleh dikongsi.
Stor Pinia tunggal berkongsi state reaktif yang kaya, tetapi hanya dengan singleton: true dalam federasi.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Keadaan Dikongsi Merentas Mikro-Frontend” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Keadaan Dikongsi Merentas Mikro-Frontend”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Keadaan Dikongsi Merentas Mikro-Frontend”?

Berkongsi stor Pinia, bas peristiwa melalui CustomEvent, URL sebagai keadaan dikongsi. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Keadaan Dikongsi Merentas Mikro-Frontend” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Prinsip Seni Bina Mikro-Frontend
Module Federation Webpack dengan Vue
Plugin Federation Vite
Keadaan Dikongsi Merentas Mikro-Frontend

← Kembali ke Vue Academy