Mensajes

Curso de Vue.js: Manejo del Estado con Vuex

Clase 16 / 19

Ver clases

Mensajes

Curso de Vue.js: Manejo del Estado con Vuex

Clase 16 de 19

Clase 16 / 19

Mensajes

Curso de Vue.js: Manejo del Estado con Vuex

Clase 16 / 19

Ver clases

Comentarios

Yefreilee Danny Samuel Parra#3971366
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!

Ameth Ordoñez Erazo#3915555

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#4967534
la clase esta cortada, seguir los pasos de yefreilee antes d eocmenzar la clase par ano perderse

Comentarios

Yefreilee Danny Samuel Parra#3971366

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!

Ameth Ordoñez Erazo#3915555

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

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