Vue-hook-svc NPM

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>