Getter with parameters …

[s5b]

I really like Harlem, thanks for all your hard work.

I may be missing a fundamental design contract of the store pattern, but I’m keen to have a getter that can take one (or more) parameters.

My use case is as follows: I’m loading company brand information from an external data source. The brand information is immutable once loaded. The brand information includes a map of contact information, for example, departmental email addresses. I want to have a getter that takes a department identifier and then returns the corresponding departmental email address. That is, the email addresses are stored in a map within the store, and retrieved by means of the key as a parameter applied through a getter.

Am I misunderstanding the store pattern in wanting this feature?

Cheers, S t u a r t .

[andrewcourtice]

Hi Stuart

Thank you for your kind words - I really appreciate it.

Although historically Vuex has enabled the use of getters with parameters, I have made the conscious decision to not include that functionality as part of Harlem as the same result can now be achieved using just a function and leaning on Vue's reactivity system to re-evaluate the function once a dependency changes.

Given your use-case above, here's how you might achieve what you are describing:

/*
Assuming you have a state structure something like:
{
    departments: [
        {
            id,
            email
        }
    ]
}
*/

import {
    state
} from './store';

export function getDepartmentEmail(departmentId: string): string | undefined {
    return state.departments.find(({ id }) => id === departmentId)?.email;
}

If you use the getDepartmentEmail function in a Vue component, computed, store getter, or any other Vue reactive mechanism, the function will be re-evaluated when state.departments is changed (and therefore behave the exact same way as a getter).

Hopefully that helps. Let me know if you have any further questions.

Thanks
Andrew

[s5b]

Well, after reading the documentation for vuex and pinia it seems that parameterised getters are a thing with those tools.

I tried something similar with Harlem, and added the following method to the sample

export const colour = getter('colour', state => (colour: string) => `${state.firstName} likes ${colour}.`);

And then in the component can access the value like so in a component setup method:

import {colour} from './userStore';
// ...
const fave = colour.value('purple');

And template:

<template>
    <p> We know that {{fave}}</p>
</template>

Will display:

We know that John likes purple.

🤔

[andrewcourtice]

Yes that is a correct alternative way to author the getter 😄 This method works exactly the same way as Pinia as they both just return a Vue computed.

It's worth nothing that this method has the exact same caveats as described in the Pinia documentation:

Note that when doing this, getters are not cached anymore, they are simply functions that you invoke. You can however cache some results inside of the getter itself, which is uncommon but should prove more performant:

Given the caveat mentioned above the parameterised getter solution is not necessarily better or worse than the function-based solution unless you are able to cache properties inside the getter function as mentioned in the Pinia docs.

This raises a good point which I haven't included in the Harlem documentation. I will update the docs to provide a solution for parameterised getters. Given that Harlem's getters work the same as Pinia's, the docs for this use-case will be roughly the same as Pinia's.

Cheers