Скачать или смотреть Vue 3 + Vuetify: Explicación Completa del Componente TriviaGame (Control del Juego, API y Estado)

En este video vamos a profundizar en el componente principal TriviaGame.vue, donde ocurre toda la lógica central de nuestro juego de trivia en Vue 3 con Vuetify.
Aquí aprenderás cómo manejar el flujo del juego, consumir la API de OpenTDB, controlar el temporizador de cada pregunta, y gestionar el estado global del puntaje y las pantallas (inicio, juego, fin).

Conceptos clave que aprenderás en este tutorial:

Gestión del flujo del juego

Ciclo completo: inicio → jugando → resultados.

Manejo de la variable gameState para cambiar de pantalla dinámicamente.

Consumo de API en Vue

Fetch a https://opentdb.com/api.php?amount=10.

Normalización de datos y mezcla de respuestas (shuffle).

Manejo de estado loading mientras llegan los datos.

Temporizador global

Uso de setInterval para descontar segundos.

Reinicio del timer al cambiar de pregunta.

Limpieza con clearInterval y beforeUnmount para evitar errores.

Lógica de las preguntas y respuestas

Acceso a la pregunta actual con computed: currentQuestion.

Validación de respuestas y actualización de puntaje.

Manejo de timeout cuando el tiempo llega a cero.

Buenas prácticas en Vue

Uso de data para estados mutables.

Uso de computed para valores derivados (pregunta actual).

Métodos organizados: startGame, startTimer, handleAnswer, nextQuestion, restartGame.

Separación de responsabilidades entre este componente principal y los subcomponentes (StartScreen, TriviaQuestion, ScoreBoard, GameOver).

Por qué este componente es clave:
TriviaGame.vue es el cerebro del proyecto. Desde aquí controlamos el flujo, el puntaje, el temporizador y la interacción entre componentes. Entenderlo bien te permitirá no solo personalizar tu trivia, sino también aplicar la misma lógica en otros proyectos con Vue y Vuetify.

Si quieres dominar Vue con ejemplos prácticos, este componente te dará una base sólida para comprender:
👉 Estados reactivos
👉 Comunicación entre componentes
👉 Control del ciclo de vida
👉 Buenas prácticas en proyectos escalables


#VueJS #Vuetify #JavaScript #Vue3 #Frontend #Trivia #OpenTDB #Programación #Tutorial