vue-hook-svc
A service、state manager for Vue2/3. minzipped less than 300 bytes。
Advantage
- ~300 bytes min+gz.
- Minimal API 5 minutes to learn, easy to use.
- Written in TypeScript offer you more types.
Installation
npm install vue-hook-svc --save
if in Vue2, you need @vue/composition-api installed
npm i @vue/composition-api --save
Usage & Example
declare a service
// declare a service
import { svc } from 'vue-hook-svc';
export class SomeService extends svc.ServiceBase {
state = {
show: true
};
toggle() {
this.state.show = !this.state.show;
}
}
// create a global service
export const globalSomeSvc = svc.createSingleton(SomeService);
// create a service func depends on the component's lifecycle
export const useSomeSvc = svc.createUseService(GlobalService);use in global, anywhere
// use in global, anywhere
import { globalSomeSvc } from '.';
globalSomeSvc.state.show = false;use with the component's lifecycle
// use with the component's lifecycle
// in setup of vue's file
// then all children can use `useSomeSvc` to get the same instance.
const svc = useSomeSvc();use in template
<!-- use in template -->
<template>
<div>
<button @click="() => svc.toggle()">update</button>
<span v-if="svc.state.show">...</span>
</div>
</template>License
MIT