Contenido del curso
👀 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:
Gracias por comentarlo, lo tomaré en cuenta en mis futuros proyectos.
increible aprendí nuevas cosas a pesar que tengo experiencia en vue jejeje
Que gran curso! Como siempre excelente profesora! Ahor a actualizar el proyecto y luego hacer el curso de Pinia!
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.
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>
Ha sido uno de los mejores cursos que he tomado, ahora sí, a meterle todo con vuex y aprender sobre pinia.
