Computed Properties

Antes de explicar cómo puedes consumir datos de un "store", o sea, acceder a su estado o ejecutar sus acciones, es importante que comprendas un concepto muy importante de Vue 3. Hablo específicamente de las computed properties. Vamos a ver un ejemplo de las computed properties de manera aislada a nuestro proyecto para que se comprenda qué son y cómo se usan, para que luego, cuando vayamos a hacer uso del "store", entiendas mejor qué es lo que estamos haciendo. Aquí tenemos un ejemplo básico en el que se define un componente. Este componente tiene una sección data que devuelve el estado del componente. El estado se compone por un "author" y el "author" es un objeto que tiene un nombre y tiene un arreglo de libros. Hasta aquí no hay nada nuevo. Digamos ahora que en tu página tú quieres mostrar por cada "author" esta información. ¿Ha publicado libros” y tú quieres decir “si” o “no”. Para ello nosotros accedemos desde el objeto "author" a su atributo "books", y luego accedemos a la longitud de este arreglo para ver cuántos libros escrito el autor. Si la cantidad es mayor que cero, queremos imprimir “yes” y de caso contrario queremos imprimir “no”. Esto que estamos viendo aquí del símbolo de pregunta y los dos puntos. Es un operador ternario. Entonces estas llaves lo que van a hacer es imprimir el resultado de esta expresión JavaScript. Entonces, dentro de tu sección templates tendrías esto y lo que se va a mostrar el usuario será “yes” o será “no”. Porque todo esto se evalúa y el resultado final es una cadena simplemente. Vamos a visitar el playground de Vue para probar este código, si este es el ejemplo que nos da Vue, nosotros vamos a modificar un poco para probar el ejemplo que está en la documentación. Nos borramos y pegamos esto. En nuestro script, tenemos Export default" estamos haciendo uso de options API y tenemos aquí nuestro estado con el autor que tiene un nombre y tiene un arreglo de bugs. Y en la sección de template tenemos un párrafo que dice “Ha publicado libros” y luego un span que simplemente dice “yes” porque se ha publicado libros. Si yo borro esto dice “no”. Basta con que tenga un libro para decir que si ha publicado. Esto funciona y es algo que ya sabes hacer. Simplemente tenemos un estado y tenemos un template. Sin embargo, aquí hay algo que no se recomienda hacer. El template debería simplemente mostrar información que ya tienes el template y no debería ser responsable de decidir si mostrar “yes” o mostrar “no”, porque esto de acá así sea una condición pequeña ya es lógica. Y si haces esto, tu template y pronto va a llenarse de muchas condiciones y va a ser difícil de leer. La idea es que un template sea bastante directo y puntual, por lo tanto, qué podemos hacer para solucionar esto. No puedes agregar aquí una variable booleana "hasPublished" porque tú no quieres agregar un estado más. El estado sigue siendo el mismo. Simplemente quieres obtener información a partir del estado, quieres calcular algo a partir del estado. Cuando quieres calcular una propiedad, entonces lo recomendable es hacer uso de computed properties. De hecho, el verbo “computed” significa calcular. Entonces ¿Cómo podemos hacer uso de computed properties? Así como nosotros podemos agregar una sección de methods además de data, también podemos agregar una sección de computed. Entonces lo único que tenemos que hacer es luego de "data", poner una "," y agregar un objeto "computed". Y aquí lo vamos a definir como si se tratase de un método. Entonces usamos “this” para acceder al estado del componente. Usamos "author" para acceder a al autor, "books" a sus libros y luego “length” para acceder a la longitud del arreglo. Si es mayor que cero, devolveremos "yes" y en caso contrario lo devolveremos “no”. Al final la condición es la misma, pero se ha desplazado a la sección de script, que es donde sí podemos tener lógica. Entonces, de qué manera llamamos a esta computed property. A esta propiedad calculada le podemos poner cualquier nombre. En este caso se está llamando “publishedBooksMessage” mensaje de libros publicados. Entonces si ya contamos con una compile property, luego podemos imprimir su valor más fácilmente y como vemos el resultado al lado derecho es el mismo. Si borramos los libros del arreglo, el resultado es “no”. O sea que, estamos evaluando en la misma condición, pero ya no tenemos esa responsabilidad en el template, sino que lo tenemos en la sección de scripts. Siempre, toda la lógica debe situarse en la sección de scripts. Si en algún punto la lógica que tienes aquí empieza a crecer, pues puedes crear clases adicionales, archivos adicionales, separar un componente en varios componentes, etcétera Pero lo importante es que siempre que puedas desplaza la lógica hacia la sección de script. Evita tener lógica en la sección de templates. De hecho, la documentación nos proporciona un enlace para probar el ejemplo en el playground si le das clic en este enlace, de hecho, ya puedes ver el ejemplo directamente en el playground, pero nosotros lo copiamos primero para ver cuál es la diferencia entre un antes y un después. También lo podemos llamar, por ejemplo, “hasPublishedBooksText”. Ahí está. De la misma manera podemos crear más con computed properties, por ejemplo, podemos crear una computed property para el primer libro que ha publicado el autor, por ejemplo “firstPublishedBookTitle”, y lo único que vamos a hacer aquí y lo único que vamos a hacer aquí, es devolver el elemento que está en la posición cero. Luego, aquí debajo, vamos a agregar un párrafo que dirá “primer libro publicado del autor". Y aquí vamos a poner dentro de llaves el valor de esta computed property. Ese es el primer libro publicado del autor. Podríamos haber puesto esta expresión directamente en el template también. Pero, qué pasa si el autor no ha publicado ningún libro. En ese caso, se queda vacío, podemos hacer uso de este operador que consta de (??). Este operador hace que si el valor que está al lado izquierdo es "null" o "undefine", se devolverá lo que está al lado derecho. Entonces, si esto es "undefine", podemos devolver un texto que diga “no ha publicado ningún libro”. Entonces, si el autor no tiene libros, mostrará ese mensaje. Aquí nosotros tenemos la libertad de usar la sintaxis que queramos, porque podemos tener lógica que consta de varias líneas, no solamente de una. Entonces, siempre que queramos calcular algo, será mejor hacerlo en la sección de script y no en la sección de template, porque aquí podría complicarse cuando se trata de hacer varias operaciones sobre todo.

Crea una cuenta y continúa aprendiendo 🚀

Computed Properties