Post Top Ad

Your Ad Spot

miércoles, 7 de octubre de 2020

Cómo usar VueJS con Laravel Blade

 

Este es un tutorial un poco desafiante. Lo que queremos hacer es implementar plantillas en línea usando blade en JavaScript puro o VueJS. Aquí está el desafío. Como sabe, Blade tiene muchas funciones de conveniencia integradas que le permiten manejar rápidamente la autorización, autenticación y construcciones útiles como el bucle @forelse. Si queremos una solución completamente basada en Vue, tendremos que rehacer gran parte de esta funcionalidad nuevamente en el lado del cliente. No es lo más divertido del mundo, pero si quieres esa sensación de SPA completamente elegante , es algo que tenemos que hacer. Entonces, con eso, veamos si podemos descubrir cómo mover la funcionalidad de la hoja a los componentes de Vue.


El código actual

Por el momento, en threads / show.blade.php, recorremos todas las respuestas y para cada una se procesa un solo componente de archivo Reply.vue El objetivo es mover las respuestas a una colección de respuestas a las que se puede acceder y modificar en Vue.

Esencialmente, en lugar de esto:

Queremos hacer esto:


Replies.vue

Ok, entonces el primer paso para que esto funcione es crear ese nuevo componente Replies.vue en nuestro proyecto.
nuevo componente de envoltura vue

Nuestro primer bit de código en el componente Replies.vue comenzará con esto.

Dado que hemos utilizado una declaración de importación para el componente Responder anterior, ya no es necesario declararlo globalmente en app.js. Así que adelante y elimina la línea:

desde el archivo app.js.

Mientras estamos en eso, usaremos Ctrl+Alt+Shift+Jpara seleccionar todas las apariciones de 'atributos' en Reply.vue y refactorizar a 'datos' para mantener las cosas más consistentes.
Ctrl + Alt + Shift + J phpstorm todas las ocurrencias


páginas / Thread.vue

También queremos control sobre otras áreas de la página del hilo. Por ejemplo, la barra lateral que muestra cuántas respuestas hay debe actualizarse en tiempo real. Agregaremos otro componente específico de la página para eso con Thread.vue.
componente de un solo uso vue

Y registraremos esto en app.js así.


Llamar a <thread-view> en threads / show.blade.php

Con este nuevo componente de vista de hilo definido, podemos hacer referencia a él en threads / show.blade.php así.


El hilo debe importar respuestas

En este fragmento de arriba, estamos procesando respuestas usando <replies: data = ”{{$ thread-> replies}}”> </replies>, por lo que debe definirse explícitamente en Thread.vue de esta manera.


Refactorización de Blade a Vue

Con el trabajo que hemos hecho hasta ahora, si intentamos cargar una página de hilos y miramos las herramientas de Vue Developer, obtenemos un error. [Advertencia de Vue]: Error al montar el componente: la plantilla o la función de renderizado no están definidas. encontrado en -> <Reply>
Vue warn No se pudo montar el componente

Esto se debe a que, a partir de ahora, hace referencia a la plantilla en línea definida en el archivo reply.blade.php. Pero espera. Estamos usando componentes de Vue todo el tiempo, entonces, ¿qué hacemos? Bueno, esta parte es un poco desafiante, pero es la única solución en este momento. Básicamente, necesitamos reproducir todo lo que hace Blade en la sección <template> del componente Reply.vue. Aquí está el problema. Pierde todas esas pequeñas funciones de ayuda y conveniencia integradas en Blade. Además, todas sus variables deben cambiarse para que funcionen en el lado de VueJS / JavaScript. Divertido. En cualquier caso, lo que sucede es que la parte <template> de Reply.vue se traduciría aproximadamente a algo como esto:

Entonces, ¿qué está pasando aquí? Bueno, las líneas resaltadas muestran dónde se necesitaban ediciones para reproducir lo que podemos hacer en Blade, pero ahora en JavaScript.


Eliminando jQuery y usando Vue

Antes de este tutorial, estábamos haciendo uso de una línea rápida de jQuery para desvanecer el elemento de respuesta una vez que se eliminó de la base de datos. Sin embargo, lo que es diferente ahora es que cada respuesta es parte de una colección de respuestas en Vue. Entonces podemos eliminar el elemento de la matriz en Vue, y la página se actualizará automáticamente para nosotros. No es necesario usar jQuery en este caso.


Los niños disparan eventos, los padres escuchan eventos

Para que un componente hijo se comunique con un componente padre , ese hijo debe emitir un evento. Entonces, lo que vamos a hacer es agregar la línea resaltada a continuación en Reply.vue para hacer este anuncio de que el elemento fue eliminado y al mismo tiempo eliminar la llamada a jQuery.

¿Quién es el padre de Reply? Bueno, eso sería Replies.vue, por supuesto. Entonces, dado que estamos configurando la activación de un evento en el niño, ahora debemos configurar un oyente en el padre. Entonces, en el área <template> de las Respuestas principales, modificaremos el código así:

Lo que sucede ahora es que el padre detecta ese evento 'eliminado' y podemos activar un método remove () que también definimos en el área de métodos de la instancia de Vue. En ese método, solo usamos la función de empalme de JavaScript para eliminar el elemento exacto que queremos que desaparezca. Una vez que se elimina, Vue vuelve a renderizar automáticamente la página y ¡Poof! El elemento se ha ido.


Actualización del recuento de respuestas en tiempo real

Otra característica que ahora podemos agregar es la capacidad de actualizar el conteo de respuestas en la barra lateral instantáneamente sin necesidad de actualizar la página. Configuraremos Thread.vue así:

Luego, vincula repliesCount en threads / show.blade.php con algo como <span v-text = ”repliesCount”> </span> Una vez más, eliminamos la sintaxis de la hoja de {{$ thread-> replies_count}} y la reemplazamos por Vue. También necesitaría actualizar la etiqueta de apertura <thread-view> así <thread-view: initial-replies-count = ”{{$ thread-> replies_count}}” inline-template> en threads / show.blade.php .


Las respuestas disparan un evento, Thread escucha un evento

Lo mismo está ocurriendo ahora cuando necesitamos notificar al padre que algo ha cambiado. Necesitaremos actualizar Replies.vue para emitir un evento cada vez que se agregue o elimine una respuesta. También agregaremos el método add () que hace uso de la función JavaScript Push para agregar un elemento a la colección.

Esto significa que ahora tenemos un evento personalizado de 'agregado' que se emite cuando se agrega una respuesta, y un evento personalizado de 'eliminado' cuando se elimina una respuesta. Por lo tanto, en threads / show.blade.php podemos actualizar eletiqueta a lo siguiente. Se lee, cuando se activa 'agregado', incrementa el recuento de respuestas. Cuando se activa "eliminado", disminuye el recuento de respuestas.


Manejo de la autorización de la hoja en componentes de Vue

Aquí hay otra cosa complicada que debemos abordar cuando intentamos extraer componentes con funcionalidad blade. En Blade, estábamos usando la autorización para mostrar selectivamente el botón Favorito como tal.

Esto no se puede usar en Vue, por lo que necesitamos una solución alternativa. qué hacemos? Bueno, en última instancia, en Vue, se verá un poco así:

Necesitaremos hacer uso de una nueva variable de JavaScript y usar la directiva v-if para decidir si mostrar el botón favorito o no. Podemos configurar esta variable además de una variable de usuario en el archivo de diseño app.blade.php así.

Con el conjunto global anterior, podemos usar una propiedad calculada en Reply.vue como esta:

Con eso en su lugar, la autorización para el botón favorito ahora debería funcionar.

El otro marcado de la hoja que tenemos que volver a crear en JavaScript es este.

En Vue, vamos a traducir eso a esto.

Para que esto funcione, necesitaremos definir una propiedad calculada como esta en Reply.vue.

así como agregar una función authorize () en bootstrap.js como esta.

Con estas actualizaciones, la autorización ahora funcionará correctamente en el lado del cliente, incluso sin los conocidos atajos de blade a los que estamos acostumbrados. Echaremos un vistazo rápido a cómo están funcionando las cosas ahora. Observe que cuando el usuario elimina una respuesta, se elimina de la lista de respuestas al instante. No se actualizó la página. Además, el recuento de respuestas también se actualiza instantáneamente gracias a la comunicación entre los componentes de Vue. Es mucho para realizar un seguimiento cuando lo estás construyendo, pero el resultado final es muy bueno.
retroalimentación instantánea del componente vue


Una guía visual de sus componentes

Finalmente, podemos echar un vistazo rápido a las herramientas de desarrollador de Vue y ver cómo estos componentes funcionan juntos. Ahora tenemos un componente padre <ThreadView>, con <Replies> existente dentro de él. El componente <Replies> es una colección de componentes <Reply>. Esto es lo que hace que sea tan fácil actualizar la cantidad de elementos <Reply> reales en la página ahora. También vemos que cada <Reply> tiene un componente <Favorite> así como el componente <Flash> que habíamos creado anteriormente. Al hacer clic en cada componente, se muestran los datos reactivos asociados con él en el panel derecho de las herramientas de desarrollo. ¡Muy hábil!
componentes secundarios de vue dev tools


Cómo usar VueJS con Laravel Blade Resumen

Recrear todo lo que ofrecen los archivos de vista blade en componentes de VueJS es algo desafiante. Definitivamente hay compensaciones por la cantidad de refactorización que se necesita para que una solución completamente basada en componentes funcione bien. Sí, la elegante aplicación de una sola página es muy agradable, pero lleva tiempo volver a hacer las cosas a las que está acostumbrado a completar muy rápidamente en la hoja, como manejar la autenticación y autorización del usuario, si es que hay problemas de visualización de la interfaz de usuario. Con el tiempo, esto probablemente se volverá mucho más fácil a medida que evolucionen algunas de las mejores prácticas que convertirán los componentes en algo natural. Hasta entonces, ¡prepárate para pasar mucho tiempo refactorizando tus vistas de hoja a una colección de componentes de Vue que se comunican entre sí!


No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas