🌌 🆘 👩🏼‍🤝‍👨🏽 Vue.js para principiantes lección 7: propiedades calculadas 🍭 🐥 🍠

Hoy, en la séptima lección del curso Vue, hablaremos sobre propiedades calculadas. Estas propiedades de instancia de Vue no almacenan valores, los calculan.

→ Lección 1 para principiantes de Vue.js : instancia Vue

→ Vue.js para principiantes, lección 2: atributos de enlace

→ Lección 3 para principiantes de Vue.js: renderizado condicional

→ Lección 4 para principiantes de Vue.js: renderizado de listas

→ Vue .js para principiantes lección 5: procesamiento de eventos

→ Vue.js principiantes lección 6: clases y estilos vinculantes

→ Vue.js principiantes lección 7: propiedades calculadas

→ Vue.js principiantes lección 8: componentes

El propósito de la lección

Nuestro principal objetivo es mostrar los datos descritos por las propiedades del objeto de datos brandy product, como una sola línea.

Código inicial

Aquí está el código que se encuentra en la index.htmletiqueta con la <body>que comenzaremos:

<div id="app">
  <div class="product">
    <div class="product-image">
      <img :src="image" />
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
      <p v-if="inStock">In stock</p>
      <p v-else :class="{ outOfStock: !inStock }">Out of Stock</p>

      <ul>
        <li v-for="detail in details">{{ detail }}</li>
      </ul>
      <div
        class="color-box"
        v-for="variant in variants"
        :key="variant.variantId"
        :style="{ backgroundColor:variant.variantColor }"
        @mouseover="updateProduct(variant.variantImage)"
      ></div>

      <button
        v-on:click="addToCart"
        :disabled="!inStock"
        :class="{ disabledButton: !inStock }"
      >
        Add to cart
      </button>

      <div class="cart">
        <p>Cart({{ cart }})</p>
      </div>
    </div>
  </div>
</div>

Aquí está el código main.js:

var app = new Vue({
    el: '#app',
    data: {
        product: 'Socks',
        brand: 'Vue Mastery',
        image: './assets/vmSocks-green.jpg',
        inStock: true,
        details: ['80% cotton', '20% polyester', 'Gender-neutral'],
        variants: [
          {
            variantId: 2234,
            variantColor: 'green',
            variantImage: './assets/vmSocks-green.jpg'    
          },
          {
            variantId: 2235,
            variantColor: 'blue',
            variantImage: './assets/vmSocks-blue.jpg' 
          }
        ],
        cart: 0
    },
    methods: {
      addToCart() {
        this.cart += 1
      },
      updateProduct(variantImage) {
        this.image = variantImage
      }
    }
})

Observe que se ha agregado una nueva propiedad nombrada al objeto de datos brand.

Tarea

Queremos que lo que está almacenado dentro brandy productfuera se combine en una sola línea. En otras palabras, necesitamos mostrar el <h1>texto en la etiqueta Vue Mastery Socks, no solo Socks. Para resolver este problema, debe preguntarse cómo puede concatenar dos valores de cadena almacenados en una instancia de Vue.

La solucion del problema

Usaremos propiedades calculadas para resolver este problema. Dado que estas propiedades no almacenan valores sino que los calculan, agreguemos una propiedad al objeto de opciones utilizado al computedcrear una instancia de Vue y creemos una propiedad calculada llamada title:

computed: {
  title() {
    return this.brand + ' ' + this.product;
  }
}

Creemos que todo está organizado de manera muy simple y clara. Cuando se llama al método title(), realiza una concatenación de cadenas brandy productluego devuelve la nueva cadena resultante.

Ahora solo tenemos que mostrar titleen la etiqueta de <h1>nuestra página.

Ahora esta etiqueta se ve así:

<h1>{{ product }}</h1>

Y ahora lo haremos así:

<h1>{{ title }}</h1>

Echemos un vistazo a la página y verifiquemos la funcionalidad de lo que acabamos de hacer.

El título de la página ha cambiado.Como

puede ver, se muestra el títuloVue Mastery Socks, lo que significa que hicimos todo bien.

Tomamos dos valores de los datos de la instancia de Vue y creamos un nuevo valor basado en ellos. Si el valor sebrandactualiza alguna vez, por ejemplo, se escribe una cadena en esta propiedadVue Craftery, entonces no es necesario realizar ningún cambio en el código de propiedad calculado. Esta propiedad seguirá devolviendo la cadena correcta, que ahora se verá asíVue Craftery Socks. La propiedad calculadatitleseguirá usando la propiedadbrand, como antes, pero ahorabrandse escribiráelnuevo valor.

Este fue un ejemplo muy simple, pero un ejemplo bastante aplicable en la práctica. Veamos ahora un uso más complejo de las propiedades calculadas.

Ejemplo más complejo

Ahora estamos actualizando la imagen que se muestra en la página usando el updateProduct. Pasamos a él variantImagey luego escribimos en la propiedad imagelo que entró en el método después de pasar el mouse sobre el cuadrado de color correspondiente. El código relevante se ve así:

updateProduct(variantImage) {
  this.image = variantImage;
}

Este mecanismo funciona bien, pero si necesitamos cambiar no solo la imagen, sino también algo más, según el cuadrado de color sobre el que se desplaza el mouse, esto significará la necesidad de refactorizar este código. Vayamos al grano.

Es decir, en lugar de almacenar una propiedad en los datos image, la reemplazaremos por una propiedad selectedVariant. Lo inicializamos a 0.

selectedVariant: 0,

¿Por qué 0? El punto es que planeamos establecer esta propiedad en función del índice ( index) del elemento sobre el que se encuentra el mouse. Podemos agregar un índice a la construcción v-for:

<div
  class="color-box"
  v-for="(variant, index) in variants"
  :key="variant.variantId"
  :style="{ backgroundColor:variant.variantColor }"
  @mouseover="updateProduct(variant.variantImage)"
></div>

Tenga en cuenta que donde solía estar la construcción v-for=«variant in variants»ahora es el código v-for=»(variant, index) in variants».

Ahora, en lugar de pasar variant.variantImagea updateProduct, pasemos a este método index:

@mouseover="updateProduct(index)"

Ahora entremos en el código del método updateProduct. Aquí es donde obtenemos el índice. Y, en lugar de escribir el nuevo valor en this.image, escriba indexen this.selectedVariant. Es decir, selectedVariantcaerá el valor indexcorrespondiente al cuadrado en el que se colocó el puntero del mouse. También, para fines de depuración, colocaremos un comando para registrar el valor en este método index.

updateProduct(index) {
  this.selectedVariant = index;
  console.log(index);
}

Si ahora actualizamos la página y abrimos la consola de herramientas de desarrollador, podemos asegurarnos de que cuando pasamos el cursor sobre los cuadrados, los valores 0 y 1 están en la consola.

Comprobando la funcionalidad del mecanismo que hemos creado

Sin embargo, la imagen ya no se muestra en la página. Aparece una advertencia en la consola.

Advertencia de consola

El punto es que eliminamos la propiedadimagey la reemplazamos con una propiedadselectedValue, pero esta propiedad todavía se usa en nuestra aplicación. Solucionemos el problema devolviéndoloimagea una instancia de Vue, pero esta vez como una propiedad calculada. El código correspondiente se verá así:

image() {
  return this.variants[this.selectedVariant].variantImage;
}

Aquí devolvemos la propiedad variantImagedel elemento de matriz this.variants[this.selectedVariant]. Como índice por el cual se accede al elemento de la matriz, se usa una propiedad que es this.selectedVariantigual a 0 o 1. Esto, respectivamente, nos da acceso al primer o segundo elemento de la matriz.

Si ahora actualiza la página, la imagen se mostrará y responderá al pasar el mouse sobre los cuadrados de colores. Pero ahora este mecanismo se implementa mediante una propiedad calculada.

Ahora que refactorizamos el código del método updateProductque ahora actualiza el estado de la propiedad selectedVariant, podemos trabajar con otros datos almacenados en objetos de la matriz variants, como el campo variantQuantityque ahora agregaremos a los objetos:

variants: [
  {
    variantId: 2234,
    variantColor: 'green',
    variantImage: './assets/vmSocks-green.jpg',
    variantQuantity: 10
  },
  {
    variantId: 2235,
    variantColor: 'blue',
    variantImage: './assets/vmSocks-blue.jpg',
    variantQuantity: 0
  }
],

Eliminemos la propiedad normal inStocky, al igual que con el trabajo con una propiedad image, creemos una nueva propiedad calculada con el mismo nombre, cuyo valor de retorno se basará en selectedVarianty variantQuantity:

inStock(){
  return this.variants[this.selectedVariant].variantQuantity
}

Esta propiedad es muy similar a una propiedad calculada image. Pero ahora tomamos del objeto correspondiente no una propiedad variantImage, sino una propiedad variantQuantity.

Si ahora pasa el mouse sobre un cuadrado, la cantidad de bienes correspondiente a la cual es igual a cero, inStock0 caerá y 0 es un valor en JavaScript que se convierte en un valor booleano false. Debido a esto, se mostrará un mensaje en la página Out of Stock.

Tenga en cuenta que el botón también reacciona correctamente cuando se establece inStocken 0 como antes .

El botón y la etiqueta dependen de la cantidad de cada producto,

¿por qué todo sigue funcionando correctamente? El punto esinStockque todavía se usa para vincular una clasedisableButtona nuestro botón. La única diferencia entre la nueva versión de la aplicación y su versión anterior es que ahorainStockes una propiedad calculada, no una propiedad regular.

Obtenga más información sobre las propiedades calculadas

Las propiedades calculadas se almacenan en caché. Es decir, los resultados del cálculo de estas propiedades se almacenan en el sistema hasta que se cambian los datos de los que dependen estos resultados. Como resultado, cuando cambie variantQuantity, la caché se borrará. Y la inStockpróxima vez que se acceda a ella, la propiedad devolverá un nuevo resultado, que se colocará en la caché.

Teniendo esto en cuenta, podemos decir que si se requieren cálculos intensivos en recursos para obtener un cierto valor, entonces es más ventajoso usar una propiedad calculada para realizarlos, en lugar de un método. El método deberá llamarse cada vez que se necesite el valor correspondiente.

Además, es importante recordar que no debe cambiar los datos almacenados en la instancia de Vue en su código de propiedad calculado. En este código, todo lo que necesita hacer es realizar cálculos basados en datos existentes. Estas funciones deben estar limpias y libres de efectos secundarios.

Taller

Agregue una nueva propiedad booleana al objeto de datos utilizado para crear la instancia de Vue onSale. Indicará si la venta está en curso. Cree una propiedad calculada saleque se base en brand, producty onSaleforme una línea, se informó que ahora se realiza la venta o no. Imprima esta línea en la tarjeta de producto.

→ Aquí hay una plantilla que puede usar para resolver este problema

→ Aquí hay una solución al problema

Salir

En esta lección, aprendimos sobre propiedades calculadas. Estas son las cosas más importantes que hemos aprendido sobre ellos:

Las propiedades calculadas calculan valores, no los almacenan.
Las propiedades calculadas pueden utilizar los datos almacenados en la aplicación para crear nuevos datos a partir de ella.

Si está haciendo sus deberes para este curso, díganos si está haciendo exclusivamente lo que se le ofrece, ¿o va más allá?

→ Lección 1 para principiantes de Vue.js : instancia Vue

→ Vue.js para principiantes, lección 2: atributos de enlace

→ Lección 3 para principiantes de Vue.js: renderizado condicional

→ Lección 4 para principiantes de Vue.js: renderizado de listas

→ Vue .js para principiantes lección 5: procesamiento de eventos

→ Vue.js principiantes lección 6: clases y estilos vinculantes

→ Vue.js principiantes lección 7: propiedades calculadas

→ Vue.js principiantes lección 8: componentes

Vue.js para principiantes lección 7: propiedades calculadas