[Nuxt 3] เปลี่ยนข้อมูลใน Layout ทุกครั้งที่เปลี่ยนหน้า

Layout เวลาใช้งานจริง ตอนเปลี่ยนหน้า แม้ข้อมูลหน้าจะเปลี่ยน แต่ข้อมูลใน Layout มันจะไม่เปลี่ยนตามนะ เพราะ Layout มันจะเป็นการเรียกครั้งเดียว ทำงานครั้งเดียว แล้วอยู่ยาว

อย่างสมมติเราสร้าง h1 ใน Layout แล้วอยากเปลี่ยนมันทุกครั้งที่เปลี่ยนหน้า เพราะ title ก็จะเปลี่ยน เลยต้องเอามาเปลี่ยนใน h1 ด้วย

แต่ความเป็นจริงคือ เปลี่ยนหน้า เปลี่ยน title แต่ตัว h1 มันจะไม่เปลี่ยน

// file: layouts/default.vue

<script setup>
  const pageTitle = ref('');
  const route = useRoute();

  pageTitle.value = route.meta.title // ดึงข้อมูล title มาเพื่อกำหนด h1 ของ layout
</script>

<template>
  <h1>{{ pageTitle }}</h1>
</template>

เมื่อทำแบบนี้ตอนเรา refresh หน้า มันก็จะใช้ title ตัวใหม่ แต่ถ้าเรากดพวก NuxtLink บอกได้เลยว่า h1 จะไม่เปลี่ยน

watchEffect

เพราะงั้นเราต้องมาใช้ฟังก์ชั่น watchEffect ในการเฝ้ามองว่า หน้าถูกเปลี่ยนไหม ถ้าถูกเปลี่ยนให้ทำงานใหม่ด้วย

// file: layouts/default.vue

<script setup>
  const pageTitle = ref('');
  const route = useRoute();
  
  watchEffect(() => {
    pageTitle.value = route.meta.title // ดึงข้อมูล title มาเพื่อกำหนด h1 ของ layout
  });
</script>

<template>
  <h1>{{ pageTitle }}</h1>
</template>

เท่านี้มันก็จะทำงานใหม่ทุกครั้งที่เปลี่ยนหน้าแล้ว