Getters ​

If you have used Vue's computed properties before you will likely be familiar with the workings of a getter. A getter is a computed store property that is automatically updated when state changes.

Getters are particularly useful for joining different parts of state together or mapping data. In Harlem getters are always readonly.

Defining a Getter ​

To define a getter simply import the getter function returned from the createStore method. The getter function takes 2 arguments - a name, and a callback with a single state parameter.

const STATE = {
    firstName: 'John',
    lastName: 'Smith'
};

const {
    getter
} = createStore('user', STATE);

export const fullName = getter('fullname', state => {
    return `${state.firstName} ${state.lastName}`;
});

The getter function returns a Vue computed property that can now be used in your components or even other getters.

Usage in components ​

<template>
    <div class="app">
        <h1>Hello {{ fullName }}</h1>
    </div>
</template>

<script lang="ts" setup>
// We can import getters we need right away
import {
    fullName
} from './stores/user';
</script>