Reactive en Vue: cómo agrupar estado

Aprende a organizar estados reactivos en Vue con la función interna Reactive y trabaja de forma más limpia en Composition API. Aquí verás cómo agrupar propiedades en un solo estado, evitar el uso de .value dentro del código y exponer referencias al template con torefs de forma segura y clara.

¿Qué es Reactive en Vue y por qué agrupa estados?

Trabajar con varias refs puede fragmentar la lógica. Con Reactive, puedes convertir un objeto en estado reactivo y manejarlo como si fuera data del Options API. Esto permite agrupar por características: producto, carrito y códigos de descuento, manteniendo un flujo funcional ordenado.

• Reactive recibe un objeto y lo vuelve reactivo, como data.
• Puedes crear un product state y un cart state bien definidos.
• Se evita el uso de .value en propiedades internas.
• El código queda más cómodo y legible para mantener y escalar.

¿Cómo crear product state y cart state con Reactive?

La idea es pasar de múltiples refs sueltas a estados agrupados. Así puedes tener todo el estado del producto y del carrito en objetos reactivos, con propiedades como product, activeImage, cartOpen y cart.

// Estado del producto
const productState = Reactive({
  product: { /* datos del producto */ },
  activeImage: 0,
})

// Estado del carrito
const cartState = Reactive({
  cartOpen: false,
  cart: [],
})

¿Cómo reemplazar usos existentes sin romper nada?

• Donde antes usabas product, ahora usa productState.product.
• Donde antes usabas cart, ahora usa cartState.cart.
• Si accedías con .value, elimínalo: ya no es una ref, es parte de un objeto reactivo.
• Mantén fuera del estado funciones como add to carts si no son datos del carrito.

¿Qué beneficios concretos obtienes?

• Menos fricción con .value en propiedades internas.
• Estructura clara por dominios: producto, carrito, descuento.
• Comportamiento familiar a data del Options API mediante proxies.

¿Cómo exponer referencias con torefs en setup?

En setup, todo lo que regresas al template debe ser referencias. Los objetos creados con Reactive no son refs, sino objetos reactivos. Para convertir cada propiedad en referencia, usa torefs.

// Dentro de setup
return {
  // Convierte cada propiedad de productState en una ref
  ...torefs(productState),
  // Convierte cada propiedad de cartState en una ref
  ...torefs(cartState),
  // Funciones que no son parte del estado reactivo
  addToCarts,
}

¿Qué pasa con otras referencias existentes?

• Si tienes un discount code como ref, se mantiene igual.
• Si usas propiedades dentro de product state, quita .value.

• Asegúrate de reemplazar referencias antiguas: cart por cartState.cart y product por productState.product.

• Claves de implementación:

• Usa Reactive para agrupar estado de producto y carrito.
• Reemplaza accesos directos por productState.product y cartState.cart.
• Elimina .value en propiedades internas de objetos reactivos.
• En setup, usa torefs para exponer todo al template.

¿Tienes dudas sobre cómo migrar tus refs a un estado agrupado con Reactive o cómo aplicar torefs en tu proyecto? Comparte tu caso y lo revisamos juntos.