Alpine JS y Laravel Livewire objeto $wire, entangle y sincronización de propiedades

Cuál es la problemática que tenemos actualmente que nosotros tenemos que tener una referencia este Step para inicialmente leerlo desde acá y poder Mostrar el paso acorde en base al valor que tengamos aquí establecido ese viene siendo la primera problemática luego de esto vamos a ver otra problemática que sería de que cuando actualicemos esto cosa que ya hacemos aquí mediante el manejo de eventos que de manera mágica o automáticamente también se establezca acá y tengamos las ventajas de la reactividad que tenemos aquí es decir en vez de darle aquí un clic de manera manual para que cambie el active que lo haga Livewire como quien dice cuando se ejecuta este evento se pudiera ver de esa forma que es básicamente cuando se actualiza la propiedad que aquí est Entonces como te comentaba de momento aquí tenemos dos paredes Por una parte tenemos alpine completamente aislado de lo que es Livewire Es decir al menos ese es el ejercicio que tenemos actualmente pero necesitamos alguna manera de mezclar ambas cosas y para eso aquí tenemos el objeto de wire que es el que puedes ver aquí apenas arrancas la documentación puedes ver que te introducen el Bendito wire por las narices apenas bajas acá vas a ver bueno tenemos Este ejemplo y aquí te empiezan a hablar de lo que es el objeto en cuestión en el cual como te comentaba antes podemos hacer muchas operaciones entonces que son básicamente las que puedes ver en este listado:

// Acceso a una propiedad de la clase componente de Livewire
$wire.foo

// Llamar a un método de la clase componente Livewire
$wire.someMethod(someParam)

// Llamar a un método de la clase componente de Livewire y hacer algo con su resultado
$wire.someMethod(someParam)
   .then(result => { ... })

// Llamar a un método de la clase componente de Livewire y almacenar su respuesta usando async/await
let foo = await $wire.getFoo()

// Emitir un evento de la clase componente de Livewire llamado "algún evento" con dos parámetros
$wire.emit('some-event', 'foo', 'bar')

// Escuchando un evento Livewire emitido llamado "some-event"
$wire.on('some-event', (foo, bar) => {})

// Obtener una propiedad de Livewire
$wire.get('property')

// Establecer una propiedad de Livewire en un valor específico
$wire.set('property', value)

// Establecer la configuración de una propiedad de Livewire en un valor específico
$wire.set('property', value, true)

// Llamar a una función de Livewire
$wire.call('someMethod', param)

// Cargar un archivo y configurando la propiedad de Livewire
$wire.upload(
   'property',
   file,
   finishCallback = (uploadedFilename) => {},
   errorCallback = () => {},
   progressCallback = (event) => {}
)

// Subir varios archivos y configurar la propiedad de Livewire
$wire.uploadMultiple(
   'property',
   files,
   finishCallback = (uploadedFilenames) => {},
   errorCallback = () => {},
   progressCallback = (event) => {}
)

// Eliminando (uno de) los archivos cargados y actualizando la propiedad de Livewire
$wire.removeUpload(
   'property',
   uploadedFilename,
   finishCallback = (uploadedFilename) => {},
   errorCallback = () => {}
)

Entonces yo sé que esta parte es un poco abstracta no hace falta que entiendas todo esto no vamos a emplear prácticamente nada de esto a acción de las formas para consultar la propiedad que tengamos ahí definida a nivel de la clase componente pero por más que se es importante que entiendas que existen Y puede que en algún punto si tenemos que desarrollar algún proyecto en particular un componente en particular ahí puede que necesitemos algunas cosas acá puedes ver que inclusive podemos aquí realizar algunas cosas con el pero otra vez para lo que nosotros necesitamos que es simplemente una lectura y mantener ahí como qui dice la com ación full duplex para cuando se cambie el valor de State aquí en el servidor podamos leerlo desde acá eso sería lo único que nosotros vamos a necesitar pero importante que entiendas que de momento tenemos por una parte algo en alpine y por otra parte algo aquí en Livewire y todavía no lo hemos mezclado entonces para esto tenemos que inicializar este valor como te indicaba antes con lo que tengamos por aquí definido que en este caso es:

<div class="flex" x-data="{ active: $wire.entangle('step') }">
   <div class="flex mx-auto flex-col sm:flex-row">
       <div class="step" :class="{ 'active': parseInt(active) == 1 }">
           {{ __('STEP 1') }}
       </div>
       <div class="step" :class="{ 'active': parseInt(active) == 2 }">
           {{ __('STEP 2') }}
       </div>
       <div class="step" :class="{ 'active': parseInt(active) == 3 }">
           {{ __('STEP 3') }}
       </div>
       {{-- <div x-text="active"></div>
       <div x-text="$wire.step"></div>
       <div x-text="$wire.get('step')"></div>
       {{ $step }} --}}
   </div>
</div>

Cómo hacemos eso vamos a comenzar es entendiendo cómo podemos leer esta propiedad para que luego la podamos aprovechar para inicializar nuestras variables aquí definidas para eso como te comentaba por dé cuarta vez tenemos el objeto llamado wire por aquí lo podremos imprimir para poder visualizarlo entonces para poder visualizar algún texto en al pin por aquí tenemos que emplear el atributo llamado x-text por aquí indicamos qué es lo que queremos ver podemos colocar aquí perfectamente para imprimir lo que es el activo que tenemos acá y bueno vamos a ver aquí rapidito pendiente que esté en el mismo code como te comentaba antes por ahí veríamos un uno perdido en la vida aquí está este que está aquí entonces bueno esto sería otra vez al p 100% vamos a imprimir mediante dólar wir colocamos queé queremos imprimir otra vez esta es la forma del iware que tenemos para acceder a cualquier propiedad que tengamos aquí definida y poder leerla desde acá Bueno esta se llama St entonces aquí colocamos St sin el dólar Esta es una forma por aquí veríamos otro uno aquí Puedes cambiar esto Si quieres colocarle dos para que no te choque tanto aquí puedes ver que aparece dos y un uno Este dos sería el de alpine que no tiene nada que ver con Livewire y este sería en principio lo que tenemos aquí definido aquí puedes también cambiarlo por ejemplo con colocarlo un dos al menos de momentáneamente y aquí aparece un dos importante que creo que no lo comenté Aunque siempre lo indicó al inicio del curso tenga aquí ejecutándose tu:

npm run dev 

para que tome los cambios de manera automática Entonces qué otra forma otra vez qué otra forma tenemos de acceder a estas propiedades que tenemos aquí definidas a nivel de la clase aquí también tenemos una variante la sintaxis que sería el get:

$wire.get('step')

Aquí colocamos el nombre que sería step y finalmente tenemos la forma de Laravel que esto no tiene ninguna duda que referenciando ola como hemos hecho hasta este punto bueno en este caso hemos utilizado el War model pero también recuerda que podemos imprimir esto sin ningún problema y por aquí ver Cualquier cosa ahí aparecería con el tipo no tengo seleccionado nada y este es en crear colocarle aquí por ejemplo el tipo voy a colocar justamente lo que tengo repetido como el infierno colocarle aquí un 5000 es que parecería 5000:

class General extends Component
{
   #[Validate('required|min:2|max:255')]
   public $subject;
   #[Validate('required')]
   public $type;
   ***

Entonces ahí no hay mucha duda con eso ya que recuerda que esto te lo presentaba antes que podemos imprimir también los os model podemos imprimir cualquier propiedad que tenemos aquí definida a lo que me refiero entonces esta sería la forma del arvel que no pinta nada en esto pero por más que sea ahí está para que también quede claro y aquí lo vemos todo entonces recuerda que para al menos de momento tenemos como quien dice suspendido la parte de creación en base a lo que hicimos por acá ya sé que lo comentaste pero nos estamos moviendo aquí en el St sin necesidad de estar creando registros entonces esta parte es importante que la tengas así definida para hacer estas pruebas y entender cómo funciona todo esto ya sea que lo tengas aquí definido y haces el retorno o ya sea que lo comentaste y luego defines los pasos vamos a empezar a darle aquí click aquí Bueno antes de eso voy a recargar doy click y no sé nada para ver Ah no seleccioné el tipo selecciono el tipo voy a darle otra vez y otra vez.

Bueno aquí puedes ir viendo que se va actualizando entonces pudiéramos probar por aquí inicializar finalmente que es lo que queremos llegar este active con nuestro objeto de W que era lo que tenía por aquí en el ejercicio al inicio de hace como 20 minutos te lo muestro aquí rápido por aquí y vamos a ver qué pasa entonces aquí finalmente tenemos otra vez integración en lo que tenemos aquí en Laravel del lado del componente con algo aquí en el cliente y este algo viene siendo alpine vamos a ver qué pasa ya en este punto Bueno voy a comentar esto al menos para que no me genere ahí ruido regreso acá recargo selecciono compañía doy enviar aquí otra vez doy enviar y bueno no va haciendo nada por acá Aquí puedes ver que está inicializado Entonces por qué no funciona vamos otra vez para que se entienda un poco mejor estamos acá estamos en El Paso uno Fíjate que sí le está tomando si aquí coloco por ejemplo un dos en base al condición a la condición que hicimos antes y recargamos acá puedes ver que lo está tomando aquí Recuerda que esto por más que sea esto no lo va a cambiar esto es como está como nosotros lo escribimos aquí no va a cambiar nada si acaso cambias aquí la clase donde lo tenemos definido pero por lo demás no va a cambiar nada por lo tanto importante que no haya errores y pero aquí no esperes que render lo que es el bloque de los X que son los atributos de alpine no esperes que cambie absolutamente nada de la definición que ya tenemos pero fíjate que si lo está tomando el problema es para que se entienda un poquito más claramente La idea es que este x data solamente se ejecuta cuando se inicializa y ya no hace ningún seguimiento sobre esto que estamos colocando por acá sobre el valor que estamos inicializando algo similar a lo que sucede con el evento de mount que definimos antes para inicializar algunas cosas en nuestro componente como hicimos por ejemplo para ver el de save el de Index creo que era para ver aquí encontré uno por ejemplo el de mount que nosotros utilizamos antes para ver si estamos creando o estábamos editando Algo similar sucede aquí es decir solamente se ejecuta una vez cuando se carga la página y ahí lo deja no lo utiliza más por lo tanto no se mantiene esa sincronización entre lo que estamos haciendo del lado del servidor y con lo que tenemos en el cliente y es lo que está justamente sucediendo ahí y es un poco lo que te empiezo a explicar por acá que hagas el ejemplo que vimos Antes aunque puedes ver que esto sí se va si descas esto ahí sí vamos a ver los cambios pero problema es la inicialización que tenemos acá tal cual puedes ver ya que es una inicialización:

$wire.get('step')

Y no es como quien dice recargado tomando los cambios es un poco lo que te comento por aquí hagas este ejercicio ahí te defino qué fue lo que hicimos en base a lo explicado y que aquí lo que estamos haciendo es una inicialización a secas y ya entonces para precisamente lograr esta comunicación tan deseada para ver los cambios aquí en St tenemos que ampliar un objeto especial llamado entangle que aquí sí cambia un poquito la definición Así que esta es la sintaxis anterior no lo he actualizado ya que ahorita se emplea de la siguiente forma forma parte valga la redundancia del objeto llamado wire por lo demás la sintaxis viene siendo prácticamente igual y lo que hace es precisamente esa comunicación esto también lo tienes Aquí en Livewire al pin por aquí abajo está el objeto deang que nos permite esa sincronización Entonces vamos a ver cómo se come todo esto aquí tienes la sintaxis vamos a regresar acá colocamos en vez de esto colocamos rectangle colocamos eangle los paréntesis como si fuera una función y cuál es la Bueno aquí pendiente con las comillas empleé comillas simples afueras Bueno voy a colocarle doble porque en todo coloqué doble así quedó un poquito más organizado y aquí empleo la simple aunque también podías emplear aquí las dobles y ya pero como estoy empleando las dobles en todos todo el resto de los lugares bien por aquí colocamos Cuál es la propiedad que queremos como quien dice observar que se llama St Bueno ya esto sabes cómo funciona ya ahí no hay mucha pérdida hacemos esto y mira que ya funciona sin problema Entonces logramos como quien dice esa ese watch que tenemos ahora para observar aquí la propiedad llamada step y eso sería prácticamente todo ya con eso como quien dice puedes ver que el paso por paso está funcionando y ya podemos dar por concluida la integración entre alpine y livewire.

21-09-2024 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Alpine JS y Laravel Livewire objeto $wire, entangle y sincronización de propiedades