17 - useCounter

[cn-2k]

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="inc">Inc +</button>
    <button @click="dec">Dec -</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'

interface UseCounterOptions {
  min?: number
  max?: number
}

/**
 * Implement the composable function
 * 1. inc (+)
 * 2. dec (-)
 * 3. reset 
 * 4. min & max opotion support
 * Make sure the function works correctly
*/
function useCounter(initialValue: number = 0, options: UseCounterOptions = {}) {
  const count = ref<number>(initialValue);

  const inc = (): void => {
    if(count.value < options.max) count.value++
  }

  const dec = (): void => {
    if(count.value > options.min) count.value--
  }

  const reset = (): void => {
    count.value = initialValue
  };

  return {count, inc, dec, reset};
}

const { count, inc, dec, reset } = useCounter(0, { min: 0, max: 10 })

</script>

[sky0matic]

You are increasing/decreasing the value twice per click

[cn-2k]

You are increasing/decreasing the value twice per click

Hahaha, true, fix'd.