132 lines
3.5 KiB
Markdown
132 lines
3.5 KiB
Markdown
# 🎉 Integrated Error Store with Automatic Notifications
|
|
|
|
## What's New
|
|
|
|
The error store now automatically creates PrimeVue Toast notifications when errors are set. **No need to import both stores anymore!**
|
|
|
|
## ✅ Benefits
|
|
|
|
- **Single Import**: Only import `useErrorStore`
|
|
- **Automatic Notifications**: Error toasts appear automatically
|
|
- **Cleaner Code**: Less boilerplate in components
|
|
- **Consistent UI**: All notifications use PrimeVue Toast
|
|
- **Better Organization**: All error handling in one place
|
|
|
|
## 📖 Usage Examples
|
|
|
|
### Before (Old Way)
|
|
|
|
```javascript
|
|
// Had to import both stores
|
|
import { useErrorStore } from "@/stores/errors";
|
|
import { useNotificationStore } from "@/stores/notifications-primevue";
|
|
|
|
const errorStore = useErrorStore();
|
|
const notificationStore = useNotificationStore();
|
|
|
|
// Manual notification creation
|
|
errorStore.setGlobalError(new Error("Something failed"));
|
|
notificationStore.addError("Something failed"); // Had to do this manually
|
|
```
|
|
|
|
### After (New Way)
|
|
|
|
```javascript
|
|
// Only need one import
|
|
import { useErrorStore } from "@/stores/errors";
|
|
|
|
const errorStore = useErrorStore();
|
|
|
|
// Automatic notification - toast appears automatically!
|
|
errorStore.setGlobalError(new Error("Something failed"));
|
|
```
|
|
|
|
## 🛠️ Available Methods
|
|
|
|
### Error Methods (Auto-create toasts)
|
|
|
|
```javascript
|
|
// Global errors
|
|
errorStore.setGlobalError(new Error("System error"));
|
|
|
|
// Component-specific errors
|
|
errorStore.setComponentError("form", new Error("Validation failed"));
|
|
|
|
// API errors
|
|
errorStore.setApiError("fetch-users", new Error("Network error"));
|
|
```
|
|
|
|
### Convenience Methods (Direct notifications)
|
|
|
|
```javascript
|
|
// Success messages
|
|
errorStore.setSuccess("Operation completed!");
|
|
|
|
// Warnings
|
|
errorStore.setWarning("Please check your input");
|
|
|
|
// Info messages
|
|
errorStore.setInfo("Loading data...");
|
|
```
|
|
|
|
### Disable Automatic Notifications
|
|
|
|
```javascript
|
|
// Set errors without showing toasts
|
|
errorStore.setGlobalError(new Error("Silent error"), false);
|
|
errorStore.setComponentError("form", new Error("Silent error"), false);
|
|
```
|
|
|
|
## 🔄 Migration Guide
|
|
|
|
### Components Using Both Stores
|
|
|
|
**Old Code:**
|
|
|
|
```javascript
|
|
import { useErrorStore } from "@/stores/errors";
|
|
import { useNotificationStore } from "@/stores/notifications-primevue";
|
|
|
|
const errorStore = useErrorStore();
|
|
const notificationStore = useNotificationStore();
|
|
|
|
// Show error
|
|
errorStore.setGlobalError(error);
|
|
notificationStore.addError("Failed to save");
|
|
```
|
|
|
|
**New Code:**
|
|
|
|
```javascript
|
|
import { useErrorStore } from "@/stores/errors";
|
|
|
|
const errorStore = useErrorStore();
|
|
|
|
// Error toast shown automatically!
|
|
errorStore.setGlobalError(error);
|
|
```
|
|
|
|
### API Wrapper Updates
|
|
|
|
The `ApiWithToast` wrapper has been updated to use only the error store. All existing usage remains the same, but now it's even simpler internally.
|
|
|
|
## 🎯 What Changed Internally
|
|
|
|
1. **Error Store**: Now imports `notifications-primevue` store
|
|
2. **Automatic Calls**: Error methods automatically call toast notifications
|
|
3. **Formatted Titles**: Component names are nicely formatted (e.g., "demo-component" → "Demo Component Error")
|
|
4. **Convenience Methods**: Added `setSuccess()`, `setWarning()`, `setInfo()` methods
|
|
5. **ApiWithToast**: Updated to use only error store
|
|
6. **Demo Pages**: Updated to show single-store usage
|
|
|
|
## 🧪 Testing
|
|
|
|
Visit `/dev/error-handling-demo` to test:
|
|
|
|
- All buttons now work with single error store
|
|
- Automatic toast notifications
|
|
- Error history still works
|
|
- Component errors formatted nicely
|
|
|
|
The notifications will appear in the top-right corner using PrimeVue Toast styling!
|