Stores ​

In a nutshell a store is just a mechanism for storing, retrieving and mutating related data.

Harlem, much like Vuex, follows a Redux-like state management pattern. Harlem's functionality can be divided into 4 main concepts:

• State - The single source of truth for your data (read-only). See State.
• Getters - Computed derivation of mutations to state (read-only). See Getters.
• Mutations - The means by which state is changed (read/write). See Mutations.
• Actions - Async methods for batching mutations, api requests etc (async read/write). Actions.

Advanced actions are available with the action extension (@harlem/extension-action).

Where Harlem differs from Vuex is that as opposed to having one monolithic state tree, Harlem uses the concept of individual stores to create logical boundaries between disparate data.

Instead of defining store functions (getters, mutations etc) on a single object, Harlem uses a more functional approach which allows you to structure your codebase any way you like. The added benefit to this approach is that your stores can be tree-shaken not just at store level but right down to a getter/mutation/action level.

Defining a store ​

To define a store all you need is a name and some initial state.

import {
    createStore
} from 'harlem';

export default createStore('user', {
    firstName: 'John',
    lastName: 'Smith'
});

Specifying options ​

You can specifiy a range of options when creating a store. This is most useful for adding any extensions you wish to include with this store. For the complete set of options available refer to the API documentation.

import {
    createStore
} from 'harlem';

export default createStore('user', STATE, {
    allowOverwrite: true,
    extensions: [
        composeExtension()
    ]
});