Simple Immutable State Management For Vue 3 - harlem.js

Install & Download:

# Yarn
$ yarn add @harlem/core
# NPM
$ npm i @harlem/core --save

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>