Getters

Clase 4 de 8 • Curso de Vue.js: Manejo del Estado con Pinia

Felix Torres Javier Antonio

student•

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"
      />

Luis Cano

student•

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/

Sam Leonetti

student•

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

student•

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

student•

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

student•

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.

Julian David Alzate Cuervo

student•

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

Ameth Ordoñez Erazo

student•

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

Getters

Introducción

De Vuex a Pinia

Conceptos fundamentales

Instalación y boilerplate de Pinia

defineStore y state

Getters

Actions

Uso fuera de componentes

Cierre del curso

Diferencias entre Vuex y Pinia

Despedida