Estado simple con Options API
No es necesario usar Vuex en todas nuestras aplicaciones, es recomendable usarla cuando tenemos un proyecto con muchas vistas y componentes, ya que nos permite tener un estado global y centralizado, y así poder compartirlo entre todos los componentes de nuestra aplicación.
.
Se puede hacer una buena cantidad de cosas con el manejo de estado sin necesidad de recurrir a Vuex, sobre todo cuando los proyectos son pequeños o no manejan una gran cantidad de datos.
.
Explicación del archivo **store.js** por si te confundió un poco (como a mí):
import { reactive } from "vue";
const store = reactive({
username: "Uriel Solis",
updateUsername(newUsername) {
this.username = newUsername;
},
});
export default store;
Este código define un objeto store usando la función reactive de Vue.js. Este objeto tiene dos propiedades: username y updateUsername.
.
La propiedad username es un string con el valor "Tu nombre" que puede ser accedido y modificado por cualquier componente que importe el objeto store.
.
La propiedad updateUsername es una función que recibe un nuevo nombre de usuario como parámetro y actualiza el valor de username con este nuevo valor. Esta función utiliza la palabra clave this para hacer referencia al objeto store.
.
Al utilizar reactive para crear el objeto store, se asegura que cualquier cambio en el valor de username será notificado a todos los componentes que estén utilizando ese valor en su vista, permitiendo que la interfaz de usuario se actualice de forma dinámica.
.
Por último, el objeto store es exportado para ser utilizado en otros archivos o componentes.
. Explicación del evento input:
@input="store.updateUsername($event.target.value)"
@inputes un "directive" de Vue.js que permite enlazar un evento de entrada en un elemento HTML con una expresión o una función en Vue.js."store.updateUsername($event.target.value)"es la expresión que se ejecutará cuando el eventoinputse dispare.updateUsernamees una función definida en el objetostorede Vue.js.$event.target.valuees una propiedad que contiene el valor actual del elemento HTML que disparó el evento, en este caso<input>.
