Crafting Reusable Logic: A Vue Custom Composable Challenge

In Vue.js, custom composables are powerful tools for encapsulating and reusing stateful logic across different components. This challenge will guide you in creating a custom composable that manages a simple counter with increment, decrement, and reset functionalities. Mastering this will equip you to build more complex and maintainable Vue applications.

Problem Description

Your task is to create a custom composable function in TypeScript for Vue 3 that manages a numerical counter. This composable should expose methods to increment, decrement, and reset the counter, as well as provide the current counter value.

Key Requirements:

• Composable Function: Create a function named useCounter that returns the counter's state and control functions.
• Counter State: The composable should manage a reactive number representing the counter's value.
• Operations:
  • increment(): Increases the counter value by 1.
  • decrement(): Decreases the counter value by 1.
  • reset(): Sets the counter value back to its initial state.
• Initial Value: The composable should accept an optional initial value for the counter. If not provided, it should default to 0.
• TypeScript: The solution must be written in TypeScript.

Expected Behavior:

When useCounter is used in a Vue component, the component should be able to access the current counter value and call the increment, decrement, and reset functions to modify it. The changes to the counter value should be reactive and update the UI accordingly.

Edge Cases to Consider:

• What happens if decrement() is called when the counter is already at its minimum possible value (though for this challenge, we won't impose a strict minimum)?

Examples

Example 1:

// In a Vue component:
import { useCounter } from './useCounter';

const { count, increment, decrement, reset } = useCounter();

// Initial state: count is 0
increment(); // count becomes 1
increment(); // count becomes 2
decrement(); // count becomes 1
reset();     // count becomes 0

Explanation: This demonstrates the basic usage of the useCounter composable, showing how the count ref updates reactively as the methods are called.

Example 2:

// In a Vue component:
import { useCounter } from './useCounter';

const { count, increment, decrement, reset } = useCounter(10);

// Initial state: count is 10
increment(); // count becomes 11
reset();     // count becomes 10

Explanation: This example shows how to provide an initial value to the useCounter composable, and how the reset function brings it back to that initial value.

Constraints

• The composable should be implemented using Vue 3's Composition API.
• The solution must be written in TypeScript.
• The composable should not introduce any external dependencies beyond Vue itself.
• The primary goal is to demonstrate clear, reusable, and reactive state management.

Notes

• Consider using Vue's ref to manage the reactive state of the counter.
• Think about how to return the state and the functions in a structured way from your composable.
• The reset function should always revert to the initial value passed to the composable, not necessarily to 0 if a different initial value was provided.