Aprender Vue

Capítulo 9. Gestión del Estado con Pinia

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

El capítulo anterior nos guió a través de la construcción de las rutas de nuestra aplicación utilizando Vue Router, incluyendo rutas anidadas, guardias de ruta y navegación de ruta dinámica.

En este capítulo, aprenderemos la gestión de estados y cómo gestionar el flujo de datos dentro de nuestra aplicación Vue utilizando Pinia, la biblioteca de gestión de estados recomendada oficialmente para Vue. También exploraremos cómo construir un sistema de gestión de estados de datos reutilizable y eficiente para nuestra aplicación.

Comprender la gestión de estados en Vue

Los datos dan vida a una aplicación y conectan los componentes. Y los componentes interactúan con los usuarios y con otros utilizando estados de datos. La gestión de estados es crucial para construir una aplicación que funcione con datos reales, independientemente de su tamaño y complejidad. Por ejemplo, podemos mostrar sólo una galería de fichas de productos con una lista de pizzas y sus detalles. Una vez que un usuario añade un producto al carrito dentro de este componente de galería, necesitamos actualizar los datos del carrito y mostrar los datos actualizados del carrito en el componente del carrito al mismo tiempo que actualizamos las existencias restantes del producto elegido .

Tomemos como ejemplo nuestra aplicación Pizza House. En la vista principal (App.vue ...