Getters

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/

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