No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Getters

4/8
Recursos

Aportes 3

Preguntas 2

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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/

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 };
});