<script setup lang='ts'>
import { ref } from 'vue'
interface UseCounterOptions {
min?: number
max?: number
}
/**
* Implement the composable function
* Make sure the function works correctly
*/
function useCounter(initialValue = 0, options: UseCounterOptions = {}) {
const count = ref(initialValue)
const { min, max } = options
const inc = () => count.value = Math.min(max, count.value + 1)
const dec = () => count.value = Math.max(min, count.value - 1)
const reset = () => count.value = initialValue
return {
count, inc, dec, reset
}
}
const { count, inc, dec, reset } = useCounter(0, { min: 0, max: 10 })
</script>
<template>
<p>Count: {{ count }}</p>
<button @click="inc">
inc
</button>
<button @click="dec">
dec
</button>
<button @click="reset">
reset
</button>
</template>
