Contenido del curso
Mucho ojo, si te sale algun error, es porque hay código que falta por hacer, en el video no sale, pero se tienen que agregar,
les dejo el código de channels
getters: { getChannels: (state) => (search) => { const messagesStore = useMessagesStore(); return state.channels .filter((channel) => channel.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()) ) .map((channel) => { console.log("cahan", channel) const unreadMessagesCount = messagesStore.countUnreadMessagesByChannelId(channel.id); return { ...channel, messages: unreadMessagesCount, }; }); }, },
y también en el HomeView en el componente de chatitem
<ChatItem v-for="channel in channelsStore.getChannels(search)" :key="channel.id" :id="channel.id" :name="channel.name" :messages="channel.messages" />
Sam Leonetti
Holi ~ Me da un error respecto a people (Contacts) diciendo que se accede en el render pero no esta instanciado... y no me muestra ningún chat
Diana Martinez
Tal vez algún error de sintaxis, pero no puedo saberlo a menos que me compartas más información al respecto.
Yefreilee Danny Samuel Parra
Buenas tardes, ya me pasa dos veces que me aparece este error en el navegador
[Vue Router warn]: No match found for location with path "/undefined"
la primera no entendi como sucedio y hice todo de cero, ahora me a pasado cuando me dio un error en el v-for de HomeView.vue sobre el getChannels, borre el getChannels y la pagina me actualizo con ese error, y no logro sacar el error, inclusive deshago varios cambios y nada, no se me quita el error y no se me muestra la app :/
Diana Martinez
Uy, es complicado saber qué pueda estar pasando porque es un error muy específico, pero si nos compartes el proyecto en codesandbox o algo así, tal vez podemos ayudarte.
Ameth Ordoñez Erazo
Stores realizados con sintaxis de función:
messages.js
import { defineStore } from "pinia"; import { ref, computed } from "vue"; export const useMessagesStore = defineStore("messages", () => { const messages = ref([ { id: 1, author: 1, message: "Hola 👀", timestamp: new Date().toLocaleTimeString(), read: false, channelId: 1, }, { id: 2, author: 2, message: "Holaaa!!!", timestamp: new Date().toLocaleTimeString(), read: false, channelId: 1, }, // ... ]); const getMessages = computed(() => { return (channelId) => { return messages.value.filter( (message) => message.channelId === parseInt(channelId) ); }; }); const getUnread = computed(() => { return (channelId) => { return getMessages .value(channelId) .filter((message) => message.read === false).length; }; }); return { messages, getMessages, getUnread }; });
channels.js
import { defineStore } from "pinia"; import { ref, computed } from "vue"; import { useMessagesStore } from "@/stores/messages"; export const useChanelsStore = defineStore("channels", () => { // console.log(messagesStore.getUnread); const channels = ref([ { id: 1, name: "General", messages: null }, { id: 2, name: "Familia", messages: 2 }, { id: 3, name: "Anuncios", messages: null }, { id: 4, name: "Proyecto Vue", messages: null }, { id: 5, name: "Cuarentena recargado", messages: null }, { id: 6, name: "Trabajo", messages: null }, ]); const getChannels = computed(() => { const messagesStore = useMessagesStore(); return (search) => { return channels.value .filter((channel) => channel.name.toLowerCase().includes(search.toLowerCase()) ) .map((channel) => { const messages = messagesStore.getUnread(channel.id); return { ...channel, messages, }; }); }; }); const getChannelsById = computed(() => { return (channelId) => { const channelActual = channels.value.find( (channel) => channel.id === parseInt(channelId) ); return channelActual.name; }; }); return { channels, getChannels, getChannelsById }; });
