Getters

If you have used Vuex before you will likely be familiar with the concept 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}`;
});
1
2
3
4
5
6
7
8
9
10
11
12

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>
import {
    computed
} from 'vue';

import {
    fullName
} from './stores/user';
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

See also

Getter API Reference