[World Clock] Simple and Extensible State Management for Vue 3

Harlem is a simple, undeclared, lightweight, and extensible state manager for Vue 3. Harlem has a simple functional API for creating, reading, and changing states. This world clock app is a basic demo of some of the core features of Harlem.

Every hour is synchronized by a single time value stored in the state. The timer is set to trigger a boom every second to update the stored time. Then the researcher recalculates the time of each hour based on its time zone. The state is synced to localStorage using the storage extension. Open this URL in multiple tabs to see changes synced across tabs.

redux state is mutable or immutable, flutter stateful widget immutable, redux immutable state invariant, seamless immutable, immutable js

How to make use of it:

Install and download:

# Yarn
$ yarn add @harlem/core

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

1. Import and register 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>

Simple Immutable State Management For Vue 3, Harlem Plugin/Github