Vue Store Reset Component

This challenge focuses on creating a reusable Vue component that allows users to reset the application's Vuex store to its initial state. Store resets are crucial for testing, debugging, and providing a clean slate for users, ensuring consistent application behavior. This component should provide a clear and controlled way to achieve this without directly manipulating the store from elsewhere in the application.

Problem Description

You need to build a Vue component named StoreReset that, when activated (e.g., by clicking a button), resets the entire Vuex store to its initial state. The component should:

Detect the Vuex Store: The component must be able to automatically detect and access the Vuex store instance.
Reset the Store: Upon activation, the component should call a function that resets all modules within the Vuex store to their initial state.
Provide Visual Feedback: The component should display a confirmation message to the user after the reset is complete, indicating that the store has been successfully reset.
Handle Errors: If the reset process fails (e.g., due to an unexpected error), the component should display an error message to the user.
Be Reusable: The component should be designed to be easily integrated into different parts of the application without requiring significant modifications.

Expected Behavior:

When the component is mounted, it should attempt to access the Vuex store.
When the reset button is clicked, a confirmation message should appear briefly.
The store should be reset to its initial state.
A success message should appear briefly after the reset.
If an error occurs during the reset, an error message should appear briefly.

Edge Cases to Consider:

The Vuex store might not be initialized when the component is mounted.
The store might contain modules with complex initial states.
The reset process might fail due to unexpected errors within the modules.
The store might be mutated outside of Vuex actions/mutations during the reset process (though this should be prevented by good Vuex practices).

Examples

Example 1:

Input: A Vuex store with two modules: 'auth' (initial state: { isLoggedIn: false }) and 'cart' (initial state: { items: [] }). The StoreReset component is mounted.
Output: The 'auth' module's state becomes { isLoggedIn: false } and the 'cart' module's state becomes { items: [] }. A success message "Store reset complete!" is displayed.
Explanation: The component successfully resets both modules to their initial states.

Example 2:

Input: A Vuex store with a module 'user' that throws an error during its reset process. The StoreReset component is mounted.
Output: An error message "Failed to reset store: [Error message from the module]" is displayed. The store remains unchanged.
Explanation: The component handles the error and prevents the entire reset from failing.

Example 3:

Input: The Vuex store is not available when the component is mounted (e.g., Vuex is initialized later).
Output: The component displays an error message "Vuex store not found." and does not attempt to reset the store.
Explanation: The component gracefully handles the case where the store is not immediately available.

Constraints

The component must be written in TypeScript.
The component should use Vue 3's Composition API.
The component should not directly modify the store's state outside of Vuex actions/mutations.
The visual feedback (confirmation, success, error messages) should be displayed using a simple, non-blocking mechanism (e.g., a temporary alert or toast). No complex UI libraries are required.
The reset operation should be reasonably performant. Avoid unnecessary iterations or complex logic.

Notes

Consider using store.replaceState() to reset the store. However, be mindful of potential side effects and ensure that all modules are properly reset.
You can use a simple ref to track the visibility of the messages.
Error handling is crucial. Wrap the reset logic in a try...catch block to gracefully handle any exceptions.
Think about how to make the component adaptable to different Vuex store structures. It should not be tightly coupled to a specific store configuration.
The initial state of each module is assumed to be accessible via module.namespaced: true and module.state.