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.2.5 (04/15/2021)
- Fixed type declarations not being generated for packages and plugins
v1.2.4 (04/13/2021)
- Updated
v1.2.3 (04/01/2021)
- Fixed duplication errors being thrown in HMR scenarios
v1.1.3 (03/23/2021)
- Added sub-branch option for reset plugin
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