Simple Immutable State Management For Vue 3 – harlem.js

Description:

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:

v1.1.1 (02/28/2021)

• Exposed EVENTS constant
• Exposed global on and once
• Fixed typing of WriteState

v1.1.0 (02/22/2021)

• Added optional return types from mutations
• Added more contextual type names
• Changed plugin event names

v1.0.19 (02/12/2021)

• Update

v1.0.18 (12/29/2020)

• Update

v1.0.17 (12/13/2020)

• Update

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

You Might Be Interested In: