Vamos a comenzar con el componente básico de nuestro conjunto de herramientas de lanzamiento, Laravel 10. Laravel ha ganado equipaje durante los últimos años hasta convertirse en uno de los marcos de backend más populares y poderosos disponibles hoy en día, y por una buena razón.
composer global require laravel/installer laravel new example-app cd example-app
Lo anterior instalará una nueva aplicación Laravel en un directorio llamado “example-app”. Ahora podemos agregar Inertia para facilitar la construcción de nuestras interfaces de usuario modernas usando Vue.js
composer require inertiajs/inertia-laravel
Inertia nos permite crear una aplicación de página única (SPA), sin necesidad de construir una API. Esto se logra permitiéndonos devolver los componentes de Vue.js directamente desde nuestras rutas de Laravel.
php artisan inertia:middleware
Lo anterior creará una nueva clase de middleware llamada HandleInertiaRequests, que necesitarás añadir a tu stack de middleware en `AppHttpKernel`.
Ahora, nos enfocamos en Vue.js. Con una sintaxis familiar para los desarrolladores de Laravel y un fuerte enfoque en la facilidad de uso y la velocidad de desarrollo, Vue.js se convierte en una opción obvia para nuestras necesidades de frontend.
npm install vue@next
Ahora que tenemos Laravel, Inertia y Vue.js configurados y funcionando correctamente, podemos comenzar a centrarnos en la actualización de los datos de la vista.
Supongamos que tenemos una página de perfil de usuario en la que queremos permitir a los usuarios actualizar su nombre y correo electrónico. En este caso, nuestro controlador podría verse así:
public function update(Request $request)
{
$request->validate([
'name' => ['required', 'max:50'],
'email' => ['required', 'email', 'max:255'],
]);
auth()->user()->update(
$request->only('name', 'email')
);
return Redirect::route('user.profile')->with('success', 'Profile updated.');
}
Ahora, si necesitamos refrescar la página después de la actualización, podemos hacerlo usando el método remember de Inertia.
Lo interesante de recordar con Inertia es que memoriza los datos para una URL en particular. En otras palabras, si realizas una solicitud posterior a una URL diferente y luego regresas a la URL original, Inertia no recordará los datos previamente recordados ya que se ajusta a una URL diferente.
En resumen, la actualización de la vista de datos al usar Laravel 10, Inertia y Vuejs requiere un procedimiento estratégico relativamente simple, pero ofrece funcionalidades potentes y eficientes. Las herramientas de estas tecnologías simplifican el procedimiento y hacen que sea muy manejable, a la vez que mantienen el manejo de los datos limpio y conforme a las modernas prácticas recomendadas.