Construir un alternador de estado de tienda con Vue.js

Introducción

En este proyecto, aprenderás a crear una aplicación simple de Vue.js que permita a los usuarios cambiar el estado comercial de una tienda entre "abierta" y "cerrada". La aplicación mostrará el estado actual de la tienda y la imagen correspondiente según el estado. Los usuarios pueden hacer clic en un botón de conmutación para alternar el estado comercial de la tienda.

👀 Vista previa

Vue store status toggle demo

🎯 Tareas

En este proyecto, aprenderás:

Cómo configurar la estructura del proyecto con las carpetas y archivos necesarios
Cómo crear la configuración de Vue.js y definir el estado reactivo y la funcionalidad de conmutación
Cómo implementar la estructura HTML y los estilos CSS para mostrar el estado comercial de la tienda y el botón de conmutación
Cómo integrar la funcionalidad de conmutación para permitir a los usuarios cambiar el estado comercial de la tienda

🏆 Logros

Después de completar este proyecto, podrás:

Configurar una estructura básica de proyecto de Vue.js
Utilizar la función ref para crear variables de estado reactivo
Definir y utilizar funciones personalizadas en la configuración de Vue.js
Vincular datos y manejadores de eventos en la plantilla HTML
Estilizar la aplicación utilizando CSS para crear una interfaz visualmente atractiva

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── css
├── images
├── lib
└── index.html

Entre ellos:

css es la carpeta donde se almacenan los estilos del proyecto.
images es la carpeta donde se almacenan las imágenes del proyecto.
lib es la carpeta donde se almacenan las dependencias JS del proyecto.
index.html es la página principal.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

A continuación, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Implementar la funcionalidad de conmutación

En este paso, implementarás la funcionalidad de conmutación para cambiar el estado comercial de la tienda.

Abre el archivo index.html.
En la función useToggle, reemplaza el comentario // TODO con el siguiente código:
```
function useToggle(state) {
  // TODO
  const toggledState = ref(state);

  function toggle() {
    toggledState.value = !toggledState.value;
  }
  return [toggledState, toggle];
}
```
Esta implementación utiliza la función ref de Vue.js para crear una variable de estado reactiva toggledState y una función toggle que actualiza el estado.
Prueba la aplicación haciendo clic en el botón de conmutación. El estado comercial de la tienda debería alternar entre "abierta" y "cerrada", y la imagen correspondiente debería cambiar en consecuencia.

¡Felicitaciones! Has completado la implementación de la aplicación Cambiar estado comercial utilizando Vue.js. El efecto después de la finalización es el siguiente:

Image description

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.