No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

reactive()

24/37
Recursos

¿Qué es reactive y cómo mejora nuestro código en Vue?

En el mundo del desarrollo web, la eficiencia y la organización son elementos clave. Vue, un framework apreciado por su simplicidad y potencia, nos ofrece herramientas para gestionar estados de manera eficiente. reactive es una función interna de Vue que agrupa la información reactiva en un solo estado, mejorando la estructura del código. Veamos cómo funciona y por qué deberías considerarlo en tus proyectos.

¿Cómo se agrupa la información reactiva con reactive?

Cuando trabajamos con el Composition API de Vue, podemos encontrar ref, que nos ayuda a mantener la reactividad de componentes individuales. Sin embargo, reactive nos permite agrupar varios elementos en un solo objeto de estado, similar a un objeto data. Esto resulta particularmente útil cuando gestionamos varias piezas de información de un componente, como un carrito de compras, productos y códigos de descuento, permitiéndonos tener una estructura de código más organizada.

import { reactive } from 'vue';

const productState = reactive({
  product: {
    // aquí van las propiedades del producto
  },
  activeImage: 0
});

const cartState = reactive({
  cartOpen: false,
  cart: []
});

¿Cuál es el cambio esencial al usar reactive?

Un aspecto importante al usar reactive es que reemplazamos la sintaxis de value para sus propiedades internas. Esto significa que podemos manipular los datos de manera más intuitiva, similar a cómo tratamos los objetos en JavaScript. Esencialmente, todo lo que anteriormente requería value ahora se maneja directamente, mejorando la legibilidad y sencillez del código.

// Anteriormente se usaba:
product.value

// Ahora, simplemente accedemos como a una propiedad del objeto:
productState.product

¿Cómo integramos toRefs para referencias en el template?

Al usar reactive, los objetos no son referencias por sí mismos. Vue nos proporciona toRefs, que convierte un objeto reactivo en un conjunto de referencias. Esto es crucial cuando queremos devolver estados reactivos al template en una función de setup.

import { toRefs } from 'vue';

return {
  ...toRefs(productState),
  ...toRefs(cartState)
}

Utilizando toRefs, hacemos que cada propiedad de productState o cartState se trate como una referencia, apuntando el template hacia estas propiedades y permitiendo una integración sin fallas. Este sencillo cambio asegura que los estados financieros y de productos funcionen dinámicamente en el front-end.

Vue sigue evolucionando para facilitar la creación de aplicaciones más reactivas y organizadas. Incorporar reactive y toRefs en tu flujo de trabajo puede ser el primer paso para transformar la manera en que gestionas los datos en tus aplicaciones. ¡Continúa aprendiendo y explorando para dominar esta poderosa herramienta!

Aportes 10

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En lo personal me gusta más reactive() porque me recuerda más al Options API (con el que aprendí Vue) y me evito de usar el .value jaja.
.
Como sugerencia, para no tener que estar agregando el productState en todos los lugares donde se usaban como product, lo que podemos hacer es destructurar a productState:

const productState = reactive({
	product: {
		// Todas las propiedades
	}
});

const { product } = productState;

De esa forma solo tenemos que preocuparnos por eliminar el .value de los lugares donde usamos el product 😄
.
Dejo el código de esta clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/00104f44d8218c87260936de79fa4c5407562526

Ya me estaba acostumbrando al .value jejeje, pero me gusta cómo se ve usando Reactive, parece algo más ordenado

Si usamos ref(), tenemos que acceder a los valores de las variables/constantes que definamos con .value
Y retornar al final cada una de las variables, constantes y funciones.

Usando reactive(), agrupamos elementos en un contenedor, por lo que para acceder a los elementos dentro de este contenedor, tendremos que acceder a travez de este, como si de un objeto se tratase.
Además tendremos que retornar cada uno de los elementos que conforma esta agrupación, usando ...toRef(nombre_de_nuestro_grupo) por cada grupo que tengamos.

Para convertir un objeto reactivo a una referencia, utilizamos la función toRefs que provee vue. Para hacelo,es de la siguiente forma

return {
…toRefs(objeto);
}

Esto se realiza dentro de la función setup del composition.

contexto: soy backend de años, me puse la pilas y ahora se maquetar con CSS y aprende react con typescript, me puse a ver vue3 y estoy re confundido jajajajaja le pregunte al chat GPT la diferencia entre data(), ref() y computed() y ahi me tiro la posta, le dije loco haceme un proyecto.. pim pam pum... magia.. ahora entendi todo. Pero estos cursos me ayudan a saber por donde va la cosa. Pero sin chatGPT no entenderia nada.
Les comparto una recomendacion de cuanto usar reactive y cuando usar ref que me servio de mucho: <https://stackoverflow.com/a/65262638>

en este punto me confundi un poco, pero voy a avanzar y si algo vuelvo a la clase despues

Las funciones tambien pueden agruparse dentro de la variable reactiva, con lo que sólo es necesario hacer return de estas.

const cartState = reactive({
            cart: [],
            cartOpen: false,
            cartQuantity: 0,
            addToCart: ()=>{
              const prodIndex = cartState.cart.findIndex(prod => prod.name === productState.product.name)
              if(prodIndex >= 0){
                cartState.cart[prodIndex].quantity += 1;
              }else{
                cartState.cart.push(productState.product);
              }
              cartState.cartQuantity += 1;
              productState.product.stock -= 1;
            }
          })

s

Me había gustado más solo con ref() y acostumbrarse al .value jaja pero bueno en organización puede ser mejor reactive().