Building a Simple Counter Pinia Store in Vue

This challenge focuses on creating a basic Pinia store for managing a counter in a Vue application. Pinia is a state management library for Vue, offering a type-safe and intuitive way to handle application state. Successfully completing this challenge demonstrates a fundamental understanding of Pinia's core concepts and its integration with Vue.

Problem Description

You are tasked with creating a Pinia store named useCounterStore that manages a simple counter. The store should expose the following functionalities:

• count: A reactive property representing the current counter value (initialized to 0).
• increment(): A method to increase the counter value by 1.
• decrement(): A method to decrease the counter value by 1.
• reset(): A method to reset the counter value back to 0.

The store should be written in TypeScript, ensuring type safety for the count property and the actions. The store should be designed to be easily integrated into a Vue component.

Examples

Example 1:

Input: Initial state: 0
Action: increment() called multiple times
Output: count = 5
Explanation: The `increment()` method increases the counter by 1 each time it's called.

Example 2:

Input: Initial state: 10
Action: decrement() called twice, then reset() called once.
Output: count = 0
Explanation: `decrement()` reduces the counter by 1. `reset()` sets the counter back to 0.

Example 3: (Edge Case)

Input: Initial state: -5
Action: increment() called, then decrement() called.
Output: count = -4, then count = -5
Explanation: The store correctly handles negative counter values.

Constraints

• The store must be named useCounterStore.
• The count property must be a number.
• The increment(), decrement(), and reset() methods must be defined.
• The store must be written in TypeScript.
• The store should be designed to be easily used within a Vue component (no specific component integration is required for this challenge, just ensure the store is structured appropriately).

Notes

• Consider using Pinia's defineStore function to create the store.
• Ensure that the count property is reactive so that changes trigger updates in any Vue components using the store.
• Think about how you would access and modify the store's state from a Vue component (although you don't need to write the component itself). The store should be structured in a way that makes this straightforward.
• Focus on the core functionality of the store; error handling or complex logic is not required for this challenge.