Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

reactive()

24/37
Recursos

Aportes 7

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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.

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().