0Pricing
Vue Academy · Ders

Mikro Ön Uçlar Arasında Paylaşılan Durum

Pinia store'larını paylaşma, CustomEvent ile olay veri yolu ve paylaşılan durum olarak URL.

Mikro Ön Uçlar Arasında Paylaşılan Durum, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Paylaşılan State Sorunu

Bağımsız mikro ön yüzlerin yine de koordinasyon kurması gerekir: bir dilimdeki login, diğerindeki başlığı güncellemelidir. Ancak sıkı bağlar, mikro ön yüzlerin varlık amacını ortadan kaldırır. Amaç gevşek ve bilinçli bir iletişim kurmaktır.

Örtük Genel State'ten Kaçının

Her şeyi window'a veya devasa bir paylaşılan durum deposuna yığmak, monolitin bağlantılarını yeniden oluşturur. Ekiplerin bağımsız şekilde gelişebilmesi için dilimler arasında açık ve en az düzeyde sözleşmeler kullanmayı tercih edin.

İletişim için CustomEvent

Tarayıcının CustomEvent API'si, çatıdan bağımsız bir iletişim kanalıdır. Bir mikro ön yüz window üzerinde bir olay gönderir; diğerleri onu dinler — paylaşılan içe aktarmalar gerekmez.

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

Olayları Dinleme

Diğer dilimler addEventListener ile abone olur ve yükü event.detail içinden okur. Bu, gönderici ile alıcının bağını koparır — yalnızca bir olay adı ve biçimi üzerinde anlaşmaları gerekir.

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

Vue'da Dinleyicileri Temizleme

Sızıntıları ve component'ler yeniden bağlandığında yinelenen işleyicileri önlemek için dinleyicileri onMounted içinde kaydedin ve onUnmounted içinde kaldırın.

import { onMounted, onUnmounted } from "vue"

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

Türlendirilmiş Olay Sözleşmesi

Her ekibin adı ve yük biçimini bilmesi için olayları bir sözleşme olarak belgeleyin. Bu, mikro ön yüzler arasındaki herkese açık API'dir.

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

Paylaşılan State olarak URL

URL, gezinme ve filtreler için doğal bir paylaşılan depodur: geneldir, yer imlerine eklenebilir ve her dilim onu okuyabilir. Etkin filtre veya sayfa gibi farklı alanları ilgilendiren state'i sorgu params içine koyun.

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

URL State'ini Güncelleme

Paylaşılan filtre ve gezinme state'ini, paylaşılabilir ve geri düğmesiyle uyumlu kalması için History API ile URL'ye yazın. Tüm dilimler yeni URL'yi okuyarak tepki verir.

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

Tekil Pinia Durum Deposu

Tek bir sayfadaki daha kapsamlı paylaşılan state için tekil Pinia durum deposu işe yarar — ancak yalnızca Pinia federasyon genelinde tekil olarak paylaşılırsa tüm dilimler aynı örneği kullanır.

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

Paylaşılan Durum Deposunu Kullanma

Pinia tekil olarak paylaşıldığında, iki dilim tarafından içe aktarılan durum deposu aynı durum deposu örneğidir — birinin yazdığı state, diğeri tarafından reaktif olarak okunur.

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

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

Bir Strateji Seçme

  • CustomEvent — gevşek ve çatıdan bağımsız bildirimler.
  • URL — gezinme, filtreler ve paylaşılabilir ya da yer imlerine eklenebilir her şey.
  • Tekil Pinia — zengin, sayfa içi reaktif state; singleton: true gerektirir.

İhtiyacı karşılayan en gevşek seçeneği tercih edin.

Kısa Kontrol

MFE'ler arası state'i anlayıp anlamadığınızı kontrol edin.

Özet

Mikro ön yüzler arasında state paylaşmayı öğrendiniz:

  • Örtük genel state yerine gevşek ve açık sözleşmeleri tercih edin.
  • window üzerindeki CustomEvent ile addEventListener, çatıdan bağımsız mesajlaşma sağlar; temizliği onUnmounted içinde yapın.
  • URL, History API üzerinden sorgu params kullanarak paylaşılabilir gezinme ve filtre state'ini tutar.
  • Tekil Pinia durum deposu zengin reaktif state'i paylaşır; ancak federasyonda yalnızca singleton: true ile çalışır.

Sıkça Sorulan Sorular

“Mikro Ön Uçlar Arasında Paylaşılan Durum” dersi ücretsiz mi?

Evet — “Mikro Ön Uçlar Arasında Paylaşılan Durum” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Mikro Ön Uçlar Arasında Paylaşılan Durum” dersinde ne öğreneceğim?

Pinia store'larını paylaşma, CustomEvent ile olay veri yolu ve paylaşılan durum olarak URL. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Mikro Ön Uçlar Arasında Paylaşılan Durum” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Mikro Ön Uç Mimarisinin İlkeleri
  2. Vue ile Webpack Module Federation
  3. Vite Federation Eklentisi
  4. Mikro Ön Uçlar Arasında Paylaşılan Durum
← Vue Academy Sayfasına Dön