การตัดสินใจออกแบบโดยใช้ตัวแปร currentPage ง่ายๆ เพื่อจัดการสถานะหน้าใน App.vue

บทนำ

แอพสำหรับลูกค้าของระบบเช่า DVD จัดการการเปลี่ยนหน้าโดยไม่ใช้ Vue Router แต่ใช้เพียงตัวแปร currentPage ใน App.vue บทความนี้อธิบายเหตุผลเบื้องหลังการตัดสินใจออกแบบนี้

เหตุใดจึงไม่ใช้ Vue Router

• เมื่อพิจารณาขนาดและความต้องการของแอพ การจัดการ state แบบง่ายก็เพียงพอแล้ว
• ให้ความสำคัญกับการทำงานร่วมกับ Spring Boot backend และรักษาโครงสร้าง frontend ให้เรียบง่าย

การใช้งาน

<!-- App.vue (ตัวอย่าง) -->
<script setup lang="ts">
import { ref } from 'vue'
const currentPage = ref('home')
</script>

หน้าจอจริง

สิ่งที่เรียนรู้

แม้จะใช้การจัดการ state แบบง่าย เมื่อจำนวนหน้าเพิ่มขึ้น logic การเปลี่ยนหน้าก็มีแนวโน้มกระจัดกระจาย เมื่อแอพถึงขนาดหนึ่ง ควรพิจารณาย้ายไปใช้ Vue Router