vue-hook-svc

A service、state manager for Vue2/3. minzipped less than 300 bytes。

English | 中文

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