Vue Academy · บทเรียน

สถานะร่วมกันระหว่างไมโครฟรอนต์เอนด์

การแชร์สโตร์ Pinia อีเวนต์บัสผ่าน CustomEvent และ URL ในฐานะสถานะร่วม

สถานะร่วมกันระหว่างไมโครฟรอนต์เอนด์ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

ความท้าทายของ state ที่ใช้ร่วมกัน

ไมโครฟรอนต์เอนด์ที่เป็นอิสระยังคงต้องประสานงานกันอยู่ดี เช่น การ login ในส่วนย่อยหนึ่งควรอัปเดตส่วนหัวในอีกส่วนหนึ่ง แต่การเชื่อมโยงที่แน่นหนาจะทำลายจุดประสงค์ของแนวทางนี้ เป้าหมายคือการสื่อสารที่ หลวมและมีเจตนาชัดเจน

หลีกเลี่ยง state ส่วนกลางโดยปริยาย

การนำทุกอย่างไปกองไว้บน window หรือในคลังข้อมูลร่วมขนาดใหญ่ จะสร้างการเชื่อมโยงแบบโมโนลิธขึ้นมาอีกครั้ง ควรใช้สัญญาที่ชัดเจนและมีขอบเขตเล็กระหว่างส่วนย่อย เพื่อให้ทีมต่าง ๆ พัฒนาแยกจากกันได้

ใช้ CustomEvent เพื่อการสื่อสาร

API CustomEvent ของเบราว์เซอร์ทำหน้าที่เป็นช่องทางสื่อสารที่ไม่ขึ้นกับเฟรมเวิร์ก ไมโครฟรอนต์เอนด์หนึ่งส่งเหตุการณ์บน window ส่วนอื่น ๆ รับฟังเหตุการณ์นั้น โดยไม่ต้องนำเข้าโมดูลร่วมกัน

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

การรับฟังเหตุการณ์

ส่วนย่อยอื่น ๆ สมัครรับเหตุการณ์ด้วย addEventListener และอ่านข้อมูลที่ส่งมาจาก event.detail วิธีนี้แยกผู้ส่งออกจากผู้รับ ทั้งสองฝ่ายเพียงต้องตกลงกันเรื่องชื่อเหตุการณ์และโครงสร้างข้อมูล

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

การล้างตัวรับฟังใน Vue

ลงทะเบียนตัวรับฟังใน onMounted และนำออกใน onUnmounted เพื่อป้องกันการรั่วไหลและตัวจัดการซ้ำเมื่อ component ถูกสร้างใหม่

import { onMounted, onUnmounted } from "vue"

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

สัญญาเหตุการณ์ที่มีชนิดข้อมูล

จัดทำเอกสารของเหตุการณ์ในรูปแบบสัญญา เพื่อให้ทุกทีมทราบชื่อและโครงสร้างข้อมูลที่ส่งมา นี่คือ API สาธารณะระหว่างไมโครฟรอนต์เอนด์

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

URL เป็น state ที่ใช้ร่วมกัน

URL เป็นแหล่งเก็บข้อมูลร่วมตามธรรมชาติสำหรับการนำทางและตัวกรอง เพราะเป็นข้อมูลส่วนกลาง บันทึกเป็นบุ๊กมาร์กได้ และทุกส่วนย่อยสามารถอ่านได้ ให้ใส่ state ที่ใช้ข้ามหลายส่วน เช่น ตัวกรองที่ใช้งานอยู่หรือหน้า ไว้ใน params ของคำค้น

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

การอัปเดต state ของ URL

เขียน state ของตัวกรองและการนำทางที่ใช้ร่วมกันลงใน URL ด้วย History API เพื่อให้สามารถแชร์ได้และทำงานเข้ากับปุ่มย้อนกลับ ทุกส่วนย่อยจะตอบสนองด้วยการอ่าน URL ใหม่

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

คลัง Pinia แบบซิงเกิลตัน

สำหรับ state ที่ใช้ร่วมกันซึ่งมีรายละเอียดมากขึ้นภายในหน้าเดียว คลัง Pinia แบบ ซิงเกิลตัน เป็นทางเลือกที่ใช้ได้ แต่ต้องใช้ Pinia แบบซิงเกิลตันร่วมกันผ่านการเชื่อมโมดูล เพื่อให้ทุกส่วนย่อยใช้อินสแตนซ์เดียวกัน

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

การใช้คลังข้อมูลร่วม

เมื่อใช้ Pinia แบบซิงเกิลตันร่วมกัน คลังข้อมูลที่ส่วนย่อยสองส่วนได้นำเข้าจะเป็นอินสแตนซ์เดียวกัน state ที่ส่วนหนึ่งเขียนจะถูกอ่านโดยอีกส่วนหนึ่งแบบตอบสนองได้

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

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

การเลือกกลยุทธ์

CustomEvent — การแจ้งเตือนที่หลวมและไม่ขึ้นกับเฟรมเวิร์ก
URL — การนำทาง ตัวกรอง และข้อมูลใด ๆ ที่สามารถแชร์หรือบันทึกเป็นบุ๊กมาร์กได้
Pinia แบบซิงเกิลตัน — state ที่ตอบสนองได้อย่างครบถ้วนภายในหน้าเดียว และต้องใช้ singleton: true

เลือกตัวเลือกที่มีการเชื่อมโยงหลวมที่สุดเท่าที่ตอบโจทย์ได้

ตรวจสอบความเข้าใจ

ตรวจสอบความเข้าใจของคุณเกี่ยวกับ state ข้าม MFE

ทบทวน

คุณได้เรียนรู้วิธีใช้ state ร่วมกันระหว่างไมโครฟรอนต์เอนด์ดังนี้:

เลือกใช้สัญญาที่หลวมและชัดเจน แทน state ส่วนกลางโดยปริยาย
CustomEvent บน window ร่วมกับ addEventListener ช่วยให้ส่งข้อความได้โดยไม่ขึ้นกับเฟรมเวิร์ก และควรล้างตัวรับฟังใน onUnmounted
URL (params ของคำค้นผ่าน History API) ใช้เก็บ state ของการนำทางและตัวกรองที่แชร์ได้
คลัง Pinia แบบ ซิงเกิลตัน ใช้แชร์ state ที่ตอบสนองได้อย่างครบถ้วน แต่ต้องกำหนด singleton: true ในการเชื่อมโมดูล

คำถามที่พบบ่อย

บทเรียน “สถานะร่วมกันระหว่างไมโครฟรอนต์เอนด์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “สถานะร่วมกันระหว่างไมโครฟรอนต์เอนด์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “สถานะร่วมกันระหว่างไมโครฟรอนต์เอนด์”

การแชร์สโตร์ Pinia อีเวนต์บัสผ่าน CustomEvent และ URL ในฐานะสถานะร่วม คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “สถานะร่วมกันระหว่างไมโครฟรอนต์เอนด์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Vue Academy