Canales y Mensajes

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

Jose Alejandro Pantoja Giraldo

student•

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.

Luis Diego Aguilar Ruiz

student•

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>

Julian David Alzate Cuervo

student•

gracias amigo por la solucion

Ameth Ordoñez Erazo

student•

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

// En el archivo index.js de messages

  mutations: {
    markAsRead(state, channelId) {
      state.messages.map((message) => {
        if (message.channelId === channelId) {
          message.read = true
        }
      })
    }
  }

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

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),
      });
    },

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>

Canales y Mensajes

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