Building Reusable Logic with Vue Composables

Vue Composables are a powerful feature introduced in Vue 3 that allow you to extract and reuse stateful logic across multiple components. This challenge will guide you in creating and utilizing composables to manage a simple counter and a list of items, demonstrating how to encapsulate and share functionality effectively. Successfully completing this challenge will solidify your understanding of composable creation and usage.

Problem Description

You are tasked with creating two Vue composables: useCounter and useItemList.

• useCounter: This composable should manage a counter value. It should provide the following functionalities:

  • count: A reactive variable holding the current counter value (initialized to 0).
  • increment(): A function to increase the counter by 1.
  • decrement(): A function to decrease the counter by 1.
  • reset(): A function to reset the counter to 0.

• useItemList: This composable should manage a list of items. It should provide the following functionalities:

  • items: A reactive array holding the list of items (initialized as an empty array).
  • addItem(item: string): A function to add a new item (string) to the list.
  • removeItem(index: number): A function to remove an item at a given index from the list.

You will then use these composables within a Vue component to display and interact with the counter and the item list.

Key Requirements:

• The composables must be written in TypeScript.
• The composables should use ref from Vue to create reactive variables and functions.
• The component using the composables should correctly display the counter value and the list of items.
• The component should allow users to increment/decrement the counter and add/remove items from the list.

Expected Behavior:

• The counter should start at 0 and update correctly when incremented or decremented.
• The item list should start empty and display any added items.
• Removing an item from the list should update the displayed list accordingly.
• The component should be responsive to changes in the counter and item list.

Edge Cases to Consider:

• Decrementing the counter below 0 (consider how you want to handle this – either prevent it or allow negative values).
• Removing an item from the list at an invalid index (e.g., index out of bounds). Handle this gracefully (e.g., do nothing or display an error message).
• Adding duplicate items to the list (consider whether you want to allow duplicates or prevent them).

Examples

Example 1: useCounter

Input: Initial value = 5
Output: count = 5
increment() called: count = 6
decrement() called: count = 5
reset() called: count = 0

Explanation: The counter starts at 5, increments to 6, decrements back to 5, and then resets to 0.

Example 2: useItemList

Input: items = []
addItem("Apple") called: items = ["Apple"]
addItem("Banana") called: items = ["Apple", "Banana"]
removeItem(0) called: items = ["Banana"]

Explanation: The list starts empty, "Apple" is added, then "Banana" is added. Removing the item at index 0 ("Apple") leaves only "Banana" in the list.

Constraints

• The addItem function in useItemList must accept a string as input.
• The removeItem function in useItemList must accept a number (index) as input.
• The component using the composables should be a functional component.
• The component should be reasonably performant; avoid unnecessary re-renders.

Notes

• Think about how to structure your composables to keep them modular and reusable.
• Consider using TypeScript's type system to ensure type safety.
• You can use the provide and inject APIs if you want to share the composables across multiple components, but this is not required for this challenge.
• Focus on creating clean, well-documented code. Good variable names and comments are appreciated.
• The goal is to demonstrate your understanding of how to create and use composables in Vue 3 with TypeScript.