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/

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