Getters
Clase 4 de 8 • Curso de Vue.js: Manejo del Estado con Pinia
Contenido del curso
Felix Torres Javier Antonio
student•
hace 4 años
Clase 4 de 8 • Curso de Vue.js: Manejo del Estado con Pinia
Contenido del curso
Felix Torres Javier Antonio
Luis Cano
Sam Leonetti
Diana Martinez
Yefreilee Danny Samuel Parra
Diana Martinez
Julian David Alzate Cuervo
Ameth Ordoñez Erazo
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" />
Un defineStore() contiene state, actions y getters; las dos últimas son objetos y contienen funciones. ;)
El concepto completo lo encuentran en https://pinia.vuejs.org/core-concepts/
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
Tal vez algún error de sintaxis, pero no puedo saberlo a menos que me compartas más información al respecto.
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 :/
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.
Para los que no les funciona la vista al principio de la clase no se preocupen, pueden ver el github de esta clase para implementar en messagesview, y homeview el código que no se alcanza a explicar en la clase
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 }; });