Estado simple con Options API
Contenido del curso
Estado simple con Options API
Contenido del curso
Uriel Solis Salinas
Hanier Morales
George M
Diana Martinez
Yefreilee Danny Samuel Parra
Diana Martinez
Yefreilee Danny Samuel Parra
Ameth Ordoñez Erazo
Jose Ever Muñoz Muñoz
Diana Martinez
Raciel Erandy Hernandez Mendoza
Jose Alejandro Pantoja Giraldo
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)"
@input es 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 evento input se dispare.updateUsername es una función definida en el objeto store de Vue.js.$event.target.value es una propiedad que contiene el valor actual del elemento HTML que disparó el evento, en este caso <input>.@input="store.updateUsername($event.target.value)”
Con esto accedemos al evento por cada vez que se escribe un nuevo valor en el input, y ejecutamos esa función.
Hola, Porque se utiliza $event como parametro? no me queda claro cuando se utiliza $ en vue gracias saludos
Se usa $ para invocar elementos que pertenecen a la instancia del componente, por ejemplo, puedes tener dos instancias de un mismo elemento en diferentes partes, y cada una tendrá sus propios datos, eventos, etc… de forma individual.
Con VueX, podría hacer un sistema de chat como whatsapp? digo con los millones de usuarios que se manejan en dicha aplicación? claro se que despues dependera de un backend, pero con VUEX podria hacer un sistema de chat tan grande como lo es whatsapp?
Claro, además no todo está cargado en memoria al mismo tiempo, si te das cuenta, cuándo subes en tu historial de whatsapp como que vuelve a cargar más mensajes, eso es porque solo descarga de cierta fecha hacia el presente por defecto, a menos que pidas descargar más. Siempre se pueden utilizar ese tipo de estrategias para trabajar con grandes cantidades de datos.
Gracias profesora, excelente, Vue es hermoso, me confunde en muchas cosas por lo de options y compositions, pero me encanta! espero poder tener pronto una mejor vista de todo!
Para usarlo con la Composition API quedaría así:
El HomeView.vue
<script setup> import { ref, reactive } from "vue"; import { RouterView, RouterLink } from "vue-router"; import InputSearch from "@/components/InputSearch.vue"; import ProfileCard from "@/components/ProfileCard.vue"; import ChatItem from "@/components/ChatItem.vue"; import store from "@/store/store.js"; const search = ref(""); const profile = reactive({ username: "Ameth Ordoñez", status: "active", avatar: "/avatars/avatar.jpg", }); const channels = ref([ { id: 1, name: "General", messages: 27 }, { id: 2, name: "Emergencias", messages: null }, { id: 3, name: "Anuncios", messages: 2 }, { id: 4, name: "Proyecto 1", messages: 24 }, { id: 5, name: "Non-work", messages: null }, { id: 6, name: "Atención a clientes", messages: 120 }, ]); </script>
Y se puede usar directamente en el template:
<ProfileCard :avatar="profile.avatar" :username="store.username" :status="profile.status" />
¿ con qué comando arranco el proyecto?
Probablemente te estás adelantando, este curso es parte de la ruta de Vue, y lo que me preguntas se responde en cursos anteriores, pero siempre puedes encontrar lo que nencesites en la documentación oficial.
Asi quedaria ProfileView.vue con Composition API:
<script setup> import store from "@/store/store.js" </script> <template> <div class="profile"> <div class="box"> <img src="/avatars/avatar.jpg" alt="avatar" /> <label for="username">Nombre de usuario</label> <input type="text" placeholder="Jane Smith" :value="store.username" @input="store.updateUsername($event.target.value)" /> <button>Acceder</button> </div> </div> </template> <style lang="scss" scoped> .profile { @apply flex justify-center items-center h-screen; .box { @apply flex flex-col items-center gap-2 p-6 rounded-xl bg-zinc-800; img { @apply w-32 rounded-full border-8 border-zinc-600; } label { @apply w-full; } input { @apply px-3 py-2 rounded-md bg-zinc-900; } button { @apply w-full px-3 py-2 mt-2 rounded-md bg-zinc-600; } } } </style>
@input="store.updateUsername($event.target.value)"