RAZA !!!
Lean el código 1 y mil veces de ser necesario. PERO ENTIÉNDANLO, no escriban solo por replicar, experimenten, hagan los ejercicios, lean el código, modifÃquenlo, es una chulada darte cuenta de que entiendes todo lo escrito.
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 3
Preguntas 0
RAZA !!!
Lean el código 1 y mil veces de ser necesario. PERO ENTIÉNDANLO, no escriban solo por replicar, experimenten, hagan los ejercicios, lean el código, modifÃquenlo, es una chulada darte cuenta de que entiendes todo lo escrito.
La forma que yo encontre para marcar los mensajes como leidos fue crear un mutation en messages, el cual recibo el channelId, luego hago un map sobre todos los mensajes y veo si el channelId coincide. Si coincide, actualizo el message.read a true
// En el archivo index.js de messages
mutations: {
markAsRead(state, channelId) {
state.messages.map((message) => {
if (message.channelId === channelId) {
message.read = true
}
})
}
}
Luego en HomeView importo la mutation y la agrego en ChatIem
<script>
methods: {
...mapMutations('messages', ['markAsRead'])
}
</script>
<template>
<ChatItem
v-for="channel in getChannels(search)"
:key="channel.id"
:id="channel.id"
:name="channel.name"
:messages="channel.messages"
@click="markAsRead(channel.id)"
/>
</template>
Solución al reto de enviar mensajes en el chat:
Primero cree una mutations en el módulo message, este recibe un parámetro que es un objeto con el mensaje y el channel id:
mutations: {
addMessage(state, newMessage) {
state.messages.push({
id: Date.now(),
author: 1,
message: newMessage.message,
timestamp: new Date().toLocaleTimeString(),
read: true,
channelId: parseInt(newMessage.channelId),
});
},
Luego cree una variable reactiva, que la llame newMessage y la vincule con v-model al textarea de la vista:
const newMessage = ref("");
const sendMessage = () => {
store.commit("messages/addMessage", {
message: newMessage.value,
channelId: channelId.value,
});
newMessage.value = "";
// scrollToBottom();
};
<footer>
<textarea
rows="3"
v-model="newMessage"
@keyup.enter="sendMessage"
></textarea>
<button @click="sendMessage">
<Icon icon="carbon:send-alt" />
</button>
</footer>
Se puede dar click al botón de enviar, o bien presionar la tecla Enter para que se envie el mensaje.
Cabe aclarar que lo hice en Composition API
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?