No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Estado simple con Options API

5/19
Recursos

Aportes 4

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淭u 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 鈥渄irective鈥 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.

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

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