Despedida

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

Ameth Ordoñez Erazo

student•

👀 Ya Vuex no es la libreria oficial de Vue para manejo de estados, ahora es Pinia. Les recomiendo que ahora que ya terminaron este curso, tomen en el Pinia, que es el que sigue en la ruta de Vue.js, pues el propio team core de Vue recomienda de ahora en adelante crear los nuevos proyectos de vue con Pinia:

Curso de Vue.js: Manejo de estados con Pinia

Diego Reyes

student•

Gracias por comentarlo, lo tomaré en cuenta en mis futuros proyectos.

Jose Barboza

student•

increible aprendí nuevas cosas a pesar que tengo experiencia en vue jejeje

Jose Alejandro Pantoja Giraldo

student•

Repito lo que dije en el primer video. Tu forma de programar es una y otra después de conocer vuex. Como si te desbloquearan una sección del cerebro jajajajja Programar se hace más limpio y las funcionalidades que antes pensaste serían un horror de usar, de repente son muy sencillas.

Gracias profe.

Carlos Rodríguez

student•

Que gran curso! Como siempre excelente profesora! Ahor a actualizar el proyecto y luego hacer el curso de Pinia!

Alexander Flores Rayme

student•

Para actualizar el Title:

<script>
import MessageItem from "@/components/MessageItem.vue";
import { mapGetters } from "vuex";

export default {
  components: {
    MessageItem,
  },
  data() {
    return {
      title: "Nombre del canal",
      channelId: null,
      people: [{ id: 1, name: "Tú", avatar: "/avatars/avatar.jpg" }],
      messages: [
        {
          id: 1,
          author: 1,
          message: "Hola 👀",
          timestamp: new Date().toLocaleTimeString(),
        },
        {
          id: 2,
          author: 2,
          message: "Holaaa!!!",
          timestamp: new Date().toLocaleTimeString(),
        },
        {
          id: 3,
          author: 3,
          message: "Hola a todo el mundo 😊",
          timestamp: new Date().toLocaleTimeString(),
        },
        {
          id: 4,
          author: 3,
          message: "¿Cómo están?",
          timestamp: new Date().toLocaleTimeString(),
        },
        {
          id: 5,
          author: 1,
          message: "Todo muy bien :D",
          timestamp: new Date().toLocaleTimeString(),
        },
        {
          id: 6,
          author: 2,
          message: "Si, todo bien.",
          timestamp: new Date().toLocaleTimeString(),
        },
        {
          id: 7,
          author: 1,
          message: "Oigan, les escribo para contarles algo... 😌",
          timestamp: new Date().toLocaleTimeString(),
        },
        {
          id: 8,
          author: 3,
          message: "A vers 👀",
          timestamp: new Date().toLocaleTimeString(),
        },
        {
          id: 9,
          author: 2,
          message: "Ahhhh!!",
          timestamp: new Date().toLocaleTimeString(),
        },
        {
          id: 10,
          author: 2,
          message: "¡Cuenta ese chismesito yaaaa!",
          timestamp: new Date().toLocaleTimeString(),
        },
        {
          id: 11,
          author: 1,
          message: "Pues, ¡acabamos de lanzar los nuevos cursos de Vue.js!",
          timestamp: new Date().toLocaleTimeString(),
        },
      ],
    };
  },
  computed: {
    ...mapGetters("messages", ["getMessages"]),
    ...mapGetters("contacts", ["getContactById"]),
    ...mapGetters("channels", ["getChannels"]),

    // Obtener el canal actual basado en channelId
    currentChannel() {
      return this.getChannels("")?.find(
        (channel) => channel.id === Number(this.channelId)
      );
    },

    // Vista de los mensajes del canal actual
    messagesView() {
      return this.getMessages(this.channelId)?.map((message) => {
        const author = this.getContactById(message.author);
        if (!author) return message;
        return {
          ...message,
          author,
          self: author.id === 1,
        };
      });
    },
  },
  watch: {
    "$route.params.id": {
      immediate: true,
      handler(id) {
        this.channelId = id;

        // Actualiza el título dinámicamente con el nombre del canal
        if (this.currentChannel) {
          this.title = this.currentChannel.name;
        }

        this.scrollToBottom();
      },
    },
  },
  mounted() {
    this.scrollToBottom();
  },
  methods: {
    scrollToBottom() {
      this.$refs?.end?.scrollIntoView({
        behavior: "smooth",
      });
    },
  },
};
</script>

Diego Reyes

student•

Ha sido uno de los mejores cursos que he tomado, ahora sí, a meterle todo con vuex y aprender sobre pinia.