v3-use

Appearance

Return to top
On this page

useCounter

管理计数器的 Hook。

Demo

</>
source
0
<template>
  <div>{{ state }}</div>
  <button @click="inc()">inc()</button>
  <button @click="dec()">dec()</button>
  <button @click="set(3)">set(3)</button>
  <button @click="reset()">reset()</button>
</template>

<script setup lang="ts">
import { useCounter } from 'v3-use'

const [state, { inc, dec, set, reset }] = useCounter(0)
</script>

Usage 

const [state, { inc, dec, set, reset }] = useCounter(0)

const [state, { inc, dec, set, reset }] = useCounter(0)

Reference 

const [state, actions] = useCounter(initialValue?: number, options?: Options)

const [state, actions] = useCounter(initialValue?: number, options?: Options)

Type Declarations 

export interface Options {
  min?: number
  max?: number
}
export declare type ValueParam = number | ((c: number) => number)
export interface Actions {
  inc: (delta?: number) => void
  dec: (delta?: number) => void
  set: (value: ValueParam) => void
  reset: () => void
}
export declare function useCounter(
  initialValue?: number,
  options?: Options
): [Ref<number>, Actions]

export interface Options {
  min?: number
  max?: number
}
export declare type ValueParam = number | ((c: number) => number)
export interface Actions {
  inc: (delta?: number) => void
  dec: (delta?: number) => void
  set: (value: ValueParam) => void
  reset: () => void
}
export declare function useCounter(
  initialValue?: number,
  options?: Options
): [Ref<number>, Actions]