Provide/Inject en Vue 3, desarrollando un Widget del tiempo
En Vue 3, la característica "Provide/Inject" es una forma de transmitir datos a través de la jerarquía de componentes de una aplicación Vue sin necesidad de utilizar props o emitir eventos. Esto puede ser útil cuando se quiere compartir datos entre componentes que no están necesariamente en una relación padre-hijo directa.
Para usar "Provide/Inject" en un componente, primero se debe utilizar el método "provide" en el componente principal para proporcionar los datos que se deseen compartir. Luego, en cualquier componente hijo que desee acceder a esos datos, se debe utilizar el método "inject" para inyectar esos datos en el componente.
Veamos un ejemplo rápido para tener una idea de cómo se podría utilizar "Provide/Inject" en un componente Vue:
En este ejemplo, el componente principal proporciona la variable "theme" y la función "setTheme" a través de "provide". Luego, el componente hijo "Button" puede acceder a esos datos a través de "inject" y utilizarlos en su propio código.
Es importante tener en cuenta que "Provide/Inject" solo está disponible en componentes de nivel superior y no se puede utilizar en componentes de nivel inferior. Además, "Provide/Inject" es una característica avanzada y no se debe utilizar a menos que sea necesario, ya que puede hacer que el código sea más difícil de entender y mantener.
Widget del tiempo con provide/inject en Vue 3 Composition API
Ahora veamos cómo desarrollar el widget del tiempo que tenemos representado más arriba con provide/inject haciendo uso de Composition API.
La anterior es la jerarquía de componentes que vamos a utilizar para llevar a cabo nuestro ejemplo, y como no puede ser de otra forma, empezaremos por el componente superior llamado Weather, que es el encargado de proveer de información al resto de componentes hijos, sea cual sea su nivel.
Componente superior Weather, el proveedor de datos
Lo más importante de este componente es lo siguiente:
Utilizamos provide con todos los datos que queramos utilizar para proveer a los componentes hijos de nuestro componente.
No pasamos ninguna prop a nuestros componentes hijos, con provide/inject no es necesario.
Componente hijo WeatherToolbar
Ahora creemos un componente hijo de Weather, que a su vez tendrá dos hijos.
Puedes ver que en este componente no estamos haciendo nada más que utilizar un par de componentes más, lo bueno viene ahora.
Componente hijo de WeatherToolbar [WeatherToolbarLocation]
Para mostrar la localización del tiempo que estamos mostrando, añadamos el componente WeatherToolbarLocation.vue con el siguiente código.
Aquí ya podemos ver la magia de provide/inject en Vue 3, gracias a que el componente Weather ha proveído de datos a sus hijos, ahora podemos hacer uso de inject para utilizar esos datos, ¡fácil!
Componente hijo de WeatherToolbar [WeatherToolbarWind]
Exactamente lo mismo podemos hacer con el componente que mostrará la información del viento.
Componente WeatherCurrent, mostrando el tiempo actual
El componente WeatherCurrent mostrará el tiempo actual y un icono representativo. Lo más importante es seguir entendiendo que de la misma forma que hemos hecho con la toolbar, aquí podemos injectar los datos del componente Weather para nutrir a nuestro componente de datos.
Componente WeatherFooter, mostrando la temperatura en Celsius y Fahrenheit
La última pieza del puzzle es el footer, aquí seguiremos haciendo uso de inject para mostrar la temperatura actual de diferentes formas:
Si quieres seguir aprendiendo más cosas sobre Vue 3 y Composition API, no te pierdas la ruta de aprendizaje.