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