@harlem/core
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.6 • Public • Published

    Harlem

    Harlem

    npm

    This is the core Harlem package. For a general overview of Harlem see here or check out the complete documentation.

    Getting started

    1. Install @harlem/core:
    yarn add @harlem/core
    # or
    npm install @harlem/core
    1. Register the Harlem plugin with your Vue app instance:
    import App from './app.vue';
    import Harlem from '@harlem/core';
    
    createApp(App)
        .use(Harlem)
        .mount('#app');
    1. Create your store and write any getters, mutations or actions (if using the actions extension):
    import {
        createStore
    } from '@harlem/core';
    
    const STATE = {
        firstName: 'John',
        lastName: 'Smith'
    };
    
    const {
        getter,
        mutation,
        ...store
    } = createStore('user', STATE);
    
    export const state = store.state;
    export const fullName = getter('fullname', state => `${state.firstName} ${state.lastName}`);
    export const setFirstName = mutation('set-first-name', (state, payload) => state.firstName = payload);
    export const setLastName = mutation('set-last-name', (state, payload) => state.lastName = payload);

    Or if you're using actions:

    import actionExtension from '@harlem/extension-action';
    
    import {
        createStore
    } from '@harlem/core';
    
    const STATE = {
        firstName: 'John',
        lastName: 'Smith'
    };
    
    export const {
        state,
        getter,
        mutation,
        action,
        ...store
    } = createStore('user', STATE, {
        extensions: [
            actionExtension()
        ]
    });
    
    export const fullName = getter('fullname', state => {
        return `${state.firstName} ${state.lastName}`;
    });
    
    export const loadUserData = action('load-user-data', async (id: string, mutate, { signal }) => {
        const response = await fetch(`/api/users/${id}`, { signal });
    
        const {
            firstName,
            lastName,
        } = await response.json();
    
        mutate(state => {
            state.firstName = firstName;
            state.lastName = lastName;
        });
    });
    1. Use your store in your app:
    <template>
        <div class="app">
            <h1>Hello {{ fullName }}</h1>
            <input type="text" v-model="firstName" placeholder="First name">
            <input type="text" v-model="lastName" placeholder="Last name">
        </div>
    </template>
    
    <script lang="ts" setup>
    import {
        computed
    } from 'vue';
    
    import {
        state,
        fullName,
        setFirstName,
        setLastName
    } from './stores/user';
    
    const firstName = computed({
        get: () => state.firstName,
        set: value => setFirstName(value)
    });
    
    const lastName = computed({
        get: () => state.lastName,
        set: value => setLastName(value)
    });
    </script>

    Install

    npm i @harlem/core

    Homepage

    harlemjs.com

    DownloadsWeekly Downloads

    476

    Version

    2.3.6

    License

    MIT

    Unpacked Size

    1.65 MB

    Total Files

    18

    Last publish

    Collaborators

    • andrewcourtice