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