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>

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

0 0 votes
Article Rating
0
Would love your thoughts, please comment.x
()
x