Estado simple con Options API

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.

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

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