Mensajes

Yefreilee Danny Samuel Parra

student•

Voy a dejar un aporte, que tal vez a muchos les va a servir, yo me frustre bastante con esto, y bueno encontre la solucion y espero pueda ayudarle a alguien mas...

primero tienen que crear la carpeta messages dentro de src/modules segundo en el index de store tienen que importar la carpeta message

import messages from '@/store/modules/messages'

Tercero tienen que llamarla en las actions.

NOTA: todo esto se vio en clases pasadas pero por lo menos en mi caso me olvide de ello, y me trajo un gran dolor de cabeza despues ya que sin hacer lo del import messages me daba un error que no entendia el porque :( .

Bueno espero que le ayude a alguien mas,,, saludos!

Diego Reyes

student•

Eres el mejor, me ahorraste mucho tiempo, sin lugar a dudas.

Rodrigo Alejandro Omonte Soto

student•

Excelente, sabía que algo en el store me estaba faltando y no daba con la solución al error en la consola del navegador. Gracias!

Ameth Ordoñez Erazo

student•

Les dejo el script de la vista MessagesView.vue en Composition API, por si acaso quieren ver como se hacen los watcher y las computed:

<script setup>
import { ref, computed, watchEffect, onMounted } from "vue";
import MessageItem from "@/components/MessageItem.vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const route = useRoute();
const end = ref(null);

const title = ref("Nombre del canal");

const channelId = ref(null);
const people = ref([
  { id: 1, name: "Tú", avatar: "/avatars/avatar.jpg" },
  { id: 2, name: "Jason", avatar: "/avatars/avatar-02.jpg" },
  { id: 3, name: "Janet", avatar: "/avatars/avatar-03.jpg" },
]);

const getMessages = computed(() => store.getters["messages/getMessages"]);
// console.log(getMessages.value);

const messagesView = computed(() => {
  return getMessages.value(channelId.value)?.map((message) => {
    const author = people.value.find((p) => p.id === message.author);
    if (!author) return message;
    return {
      ...message,
      author,
      self: author.id === 1,
    };
  });
});

const scrollToBottom = () => {
  end?.value?.scrollIntoView({
    behavior: "smooth",
  });
};

// onMounted(() => {
//   scrollToBottom();
// });

watchEffect(() => {
  // console.log(route.params.id);
  channelId.value = route.params.id;
  scrollToBottom();
});
</script>

Julian David Alzate Cuervo

student•

la clase esta cortada, seguir los pasos de yefreilee antes d eocmenzar la clase par ano perderse

Voy a dejar un aporte, que tal vez a muchos les va a servir, yo me frustre bastante con esto, y bueno encontre la solucion y espero pueda ayudarle a alguien mas...

primero tienen que crear la carpeta messages dentro de src/modules segundo en el index de store tienen que importar la carpeta message

import messages from '@/store/modules/messages'

Tercero tienen que llamarla en las actions.

NOTA: todo esto se vio en clases pasadas pero por lo menos en mi caso me olvide de ello, y me trajo un gran dolor de cabeza despues ya que sin hacer lo del import messages me daba un error que no entendia el porque :( .

Bueno espero que le ayude a alguien mas,,, saludos!

Eres el mejor, me ahorraste mucho tiempo, sin lugar a dudas.

Excelente, sabía que algo en el store me estaba faltando y no daba con la solución al error en la consola del navegador. Gracias!

Les dejo el script de la vista MessagesView.vue en Composition API, por si acaso quieren ver como se hacen los watcher y las computed:

<script setup>
import { ref, computed, watchEffect, onMounted } from "vue";
import MessageItem from "@/components/MessageItem.vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const route = useRoute();
const end = ref(null);

const title = ref("Nombre del canal");

const channelId = ref(null);
const people = ref([
  { id: 1, name: "Tú", avatar: "/avatars/avatar.jpg" },
  { id: 2, name: "Jason", avatar: "/avatars/avatar-02.jpg" },
  { id: 3, name: "Janet", avatar: "/avatars/avatar-03.jpg" },
]);

const getMessages = computed(() => store.getters["messages/getMessages"]);
// console.log(getMessages.value);

const messagesView = computed(() => {
  return getMessages.value(channelId.value)?.map((message) => {
    const author = people.value.find((p) => p.id === message.author);
    if (!author) return message;
    return {
      ...message,
      author,
      self: author.id === 1,
    };
  });
});

const scrollToBottom = () => {
  end?.value?.scrollIntoView({
    behavior: "smooth",
  });
};

// onMounted(() => {
//   scrollToBottom();
// });

watchEffect(() => {
  // console.log(route.params.id);
  channelId.value = route.params.id;
  scrollToBottom();
});
</script>

la clase esta cortada, seguir los pasos de yefreilee antes d eocmenzar la clase par ano perderse

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