Estado simple con Options API

Clase 5 de 19 • Curso de Vue.js: Manejo del Estado con Vuex

Uriel Solis Salinas

student•

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>.

Hanier Morales

student•

@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.

George M

student•

Hola, Porque se utiliza $event como parametro? no me queda claro cuando se utiliza $ en vue gracias saludos

Diana Martinez

student•

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.

Yefreilee Danny Samuel Parra

student•

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?

Diana Martinez

student•

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.

Yefreilee Danny Samuel Parra

student•

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!

Ameth Ordoñez Erazo

student•

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"
      />

Jose Ever Muñoz Muñoz

student•

¿ con qué comando arranco el proyecto?

Diana Martinez

student•

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.

Raciel Erandy Hernandez Mendoza

student•

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>

Jose Alejandro Pantoja Giraldo

student•

@input="store.updateUsername($event.target.value)"

<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>

<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>

Estado simple con Options API

Introducción

¿Qué es VUEX y para qué sirve?

Manejo de estado

Patrón FLUX

Conceptos básicos

Instalación y boilerplate de Vuex

Estado simple con Options API

State

Getters

Mutations

Actions

Organización de código

Helpers

Modules

Espacios de nombres

Modelo de datos

Caso de uso: ChatApp con Vuex

Normalización

Canales

Mensajes

Canales y Mensajes

Contactos

Cierre del curso

Despedida