Mastering Pinia: Building a Vue.js State Management Solution

This challenge focuses on creating a fundamental Pinia store for a Vue.js application using TypeScript. You will build a store to manage a simple counter and demonstrate how to access and mutate its state from a Vue component. This is a core skill for managing application-wide data efficiently in modern Vue development.

Problem Description

Your task is to create a Pinia store that manages a single counter value. This store should support three primary operations:

1. Initializing the counter: The counter should start with a default value.
2. Incrementing the counter: A function to increase the counter's value by a specified amount.
3. Resetting the counter: A function to set the counter back to its initial value.

You will then need to integrate this store into a simple Vue component, displaying the current counter value and providing buttons to trigger the increment and reset actions.

Key Requirements:

• Use Pinia for state management.
• Implement the store using TypeScript.
• The store must have a count state property.
• The store must have an increment action that accepts an optional amount parameter (defaulting to 1).
• The store must have a reset action.
• The Vue component should display the count and allow users to interact with increment and reset.

Expected Behavior:

• When the application loads, the counter should display its initial value (e.g., 0).
• Clicking an "Increment" button should increase the counter by 1.
• Clicking an "Increment by 5" button (or similar) should increase the counter by 5.
• Clicking a "Reset" button should return the counter to its initial value.

Edge Cases to Consider:

• What happens if the increment action is called with a negative number? (For this challenge, assume positive increments only, but consider how you would handle it in a real app).

Examples

Example 1: Initial State

Input: (Conceptual: Application loads, no user interaction)

Output: The Vue component displays: Count: 0

Explanation: The Pinia store is initialized with count: 0, and the Vue component reads this initial state.

Example 2: Incrementing

Input:

1. User clicks an "Increment" button.
2. User clicks an "Increment by 5" button.

Output: The Vue component displays: Count: 6

Explanation: The first click calls increment() (defaults to 1), changing count to 1. The second click calls increment(5), changing count to 6.

Example 3: Resetting

Input:

1. User clicks an "Increment" button twice.
2. User clicks a "Reset" button.

Output: The Vue component displays: Count: 0

Explanation: The counter becomes 2 after two increments. Clicking "Reset" calls the reset action, returning count to its initial value of 0.

Constraints

• The solution must be structured as a single Pinia store definition file.
• The Vue component integration should be straightforward, demonstrating basic Pinia usage.
• No external libraries beyond Vue, Pinia, and TypeScript are permitted for the core state management logic.

Notes

• Recall how to define state, getters, and actions within a Pinia store.
• Consider how to import and use the store within a Vue component.
• Think about how TypeScript interfaces/types can enhance your store definition.
• The provided examples are conceptual; you will need to write the actual Vue and Pinia code to achieve this behavior.