Simple Immutable State Management For Vue 3 – harlem.js

harlem.js is a simple, unopinionated, immutable, lightweight, and extensible state management for Vue 3.

How to use it:

1. Import and register the harlem.js.

import App from './app.vue';
import Harlem from '@harlem/core';
createApp(App)
  .use(Harlem)
  .mount('#app')

2. Basic usage:

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('setFirstName', (state, payload) => {
  state.firstName = payload || '';
});
export const setLastName = mutation('setLastName', (state, payload) => {
  state.lastName = payload || '';
});
// 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">
import {
    defineComponent,
    computed
} from 'vue';
import {
    state,
    fullName,
    setFirstName,
    setLastName
} from './stores/user';
export default defineComponent({
  setup() {
      const firstName = computed({
          get: () => state.firstName,
          set: setFirstName
      });
      const lastName = computed({
          get: () => state.lastName,
          set: setLastName
      });
      return {
          firstName,
          lastName,
          fullName
      };
  }
});
</script>

Preview:

Changelog:

v2.3.5 (05/04/2022)

• Update

v2.3.1 (03/03/2022)

• Update

v2.3.0 (02/27/2022)

• Update compose extension to have callback in set method of useState
• Custom action strategies
• Fix SSR timing when used with storage extension

v2.2.3 (02/07/2022)

• Bugfix

v2.2.1 (12/14/2021)

• Added a restore option to the storage extension

v2.2.0 (11/08/2021)

• Added compose extension
• Update Yarn to v2

v2.1.0 (11/05/2021)

• Add indirect cancellation to action extension

v2.0.1 (09/19/2021)

• Matched Vue 3 target ECMAScript version

v2.0.0 (09/09/2021)

• Improved payload safety
• Mutation circular reference checks
• Improved devtools support
• New extensibility structure
• Actions
• Lazy getters
• Mutation tracing
• Custom registrations and providers
• Improved typing
• Improved documentation
• Improved test coverage

Download Details:

Author: andrewcourtice

Live Demo: https://harlemjs.com/demo/basic

Download Link: https://github.com/andrewcourtice/harlem/archive/main.zip

Official Website: https://github.com/andrewcourtice/harlem

Install & Download:

# Yarn
$ yarn add @harlem/core

# NPM
$ npm i @harlem/core --save