Access parametrized getter in setup store

[Walnussbaer]

I have a pinia store that uses the setup syntax.

It looks like this:

export const useMyStore= defineStore("myStore", () => {

  const fetchedEvents= ref<Array<Event>>([]);

  const getEventById= computed((id: string) => {
    return fetchedEvents.value.find((event) => (event.id= id)) ?? null;
  });

  return {
     getEventById
  }

}

In my composable, I do the following:

  const { getEventById } = storeToRefs(
    useMyStore()
  );

How can I access the parametrized getter and pass a parameter to it?

When using getEventById.value("...") i get the following error:

"This expression is not callable."

Is this related to #1065?

[ramsesmoreno]

Hi Walnussbaer. The intention of a computed is to return a value and cache it for future readings. Even if it is possible for a computed to return a function so it can receive a parameter, that would break the feature to cache the result and will act as a normal method. In that case, to avoid confusion, it is better to use an action.

Even if the example is not with the setup syntax, you can check this in the docs: https://pinia.vuejs.org/core-concepts/getters.html#passing-arguments-to-getters

[Walnussbaer]

You are absolutely right, but still, I think a method that has the semantics of a "getter" should ideally be part of the getters and not be part of the actions.

If you don't use the setup syntax for the pinia store, it also works like a charm to have getters with parameters. So I think it should also be possible to do this with the setup syntax. Why have a different feature set only because of a new syntax?

[ramsesmoreno]

It is not a different feature, if you want to receive a parameter, you should return a function. As far as i know is the same for Options and Composition API:

const getEventById= computed(() => (id: string) => {
    return fetchedEvents.value.find((event) => (event.id= id)) ?? null;
  });

or

const getEventById= computed(() => {
    return (id: string) => fetchedEvents.value.find((event) => (event.id= id)) ?? null;
  });

But of course this is not recommended because it loses the cache feature

[Walnussbaer]

OMG, I just realized my mistake. I forgot the second lambda, that's why I didn't return the a function. Thank you very much for pointing that out!