📘 Vuex with TypeScript: State Management

🎯 Introduction

Welcome to this exciting tutorial on Vuex with TypeScript! 🎉 In this guide, we’ll explore how to build type-safe, scalable state management for your Vue applications.

You’ll discover how Vuex combined with TypeScript can transform your Vue development experience. Whether you’re building single-page applications 🌐, complex dashboards 📊, or real-time interfaces ⚡, understanding type-safe state management is essential for writing robust, maintainable code.

By the end of this tutorial, you’ll feel confident building complex state management systems with full type safety! Let’s dive in! 🏊‍♂️

📚 Understanding Vuex with TypeScript

🤔 What is Vuex?

Vuex is like a centralized store for your Vue application 🏪. Think of it as a global state container that helps you manage data that needs to be shared across multiple components, with TypeScript adding compile-time safety to prevent bugs.

In TypeScript terms, Vuex provides a predictable state container with strong typing support ⚡. This means you can:

✨ Catch state-related errors at compile time
🚀 Get amazing IntelliSense and autocomplete
🛡️ Ensure action and mutation type safety
📖 Self-document your state structure

💡 Why Use Vuex with TypeScript?

Here’s why developers love this combination:

Type Safety 🔒: Catch state management errors at compile-time
Better IDE Support 💻: Autocomplete for actions, mutations, and getters
Code Documentation 📖: Types serve as inline documentation
Refactoring Confidence 🔧: Change state structure without fear
Team Collaboration 🤝: Clear contracts between components and store

Real-world example: Imagine building an e-commerce app 🛒. With Vuex + TypeScript, you can ensure your cart state, user authentication, and product data are all type-safe and consistent across your entire application.

🔧 Basic Syntax and Usage

📝 Simple Store Setup

Let’s start with a basic typed Vuex store:

// 👋 Hello, Vuex with TypeScript!
import { createStore, Store } from 'vuex';

// 🎨 Define our state type
interface RootState {
  count: number;
  message: string;
  isLoading: boolean;
}

// 🏪 Create our typed store
const store: Store<RootState> = createStore({
  state: {
    count: 0,
    message: "Welcome to Vuex! 🎉",
    isLoading: false
  },
  
  // 📊 Getters with type safety
  getters: {
    doubledCount: (state): number => state.count * 2,
    uppercaseMessage: (state): string => state.message.toUpperCase()
  },
  
  // 🔄 Mutations for synchronous state changes
  mutations: {
    INCREMENT(state): void {
      state.count++; // ✨ Type-safe mutation
    },
    SET_MESSAGE(state, payload: string): void {
      state.message = payload;
    },
    SET_LOADING(state, loading: boolean): void {
      state.isLoading = loading;
    }
  },
  
  // ⚡ Actions for asynchronous operations
  actions: {
    async fetchData({ commit }): Promise<void> {
      commit('SET_LOADING', true);
      // 🌐 Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      commit('SET_MESSAGE', 'Data loaded! 🎊');
      commit('SET_LOADING', false);
    }
  }
});

export default store;

💡 Explanation: Notice how we define types for everything! The state interface ensures type safety, and TypeScript will warn us if we try to access properties that don’t exist.

🎯 Using the Store in Components

Here’s how to use the typed store in Vue components:

// 🏗️ Component with typed store access
import { computed, ComputedRef } from 'vue';
import { useStore } from 'vuex';
import { RootState } from './store';

export default {
  setup() {
    // 🎨 Get typed store instance
    const store = useStore<RootState>();
    
    // 📊 Computed properties with full type safety
    const count: ComputedRef<number> = computed(() => store.state.count);
    const message: ComputedRef<string> = computed(() => store.state.message);
    const doubledCount: ComputedRef<number> = computed(() => store.getters.doubledCount);
    
    // 🔄 Typed action dispatching
    const increment = (): void => {
      store.commit('INCREMENT');
    };
    
    const updateMessage = (newMessage: string): void => {
      store.commit('SET_MESSAGE', newMessage);
    };
    
    const loadData = async (): Promise<void> => {
      await store.dispatch('fetchData');
    };
    
    return {
      count,
      message,
      doubledCount,
      increment,
      updateMessage,
      loadData
    };
  }
};

💡 Practical Examples

🛒 Example 1: E-commerce Shopping Cart

Let’s build a real shopping cart with full type safety:

// 🛍️ Define our product and cart types
interface Product {
  id: string;
  name: string;
  price: number;
  emoji: string;
  stock: number;
}

interface CartItem extends Product {
  quantity: number;
}

interface CartState {
  items: CartItem[];
  total: number;
  isLoading: boolean;
  discountCode?: string;
}

// 🏪 Shopping cart store module
const cartModule = {
  namespaced: true,
  
  state: (): CartState => ({
    items: [],
    total: 0,
    isLoading: false,
    discountCode: undefined
  }),
  
  getters: {
    // 📊 Calculate total with type safety
    cartTotal: (state: CartState): number => {
      return state.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
    },
    
    // 🔢 Get item count
    itemCount: (state: CartState): number => {
      return state.items.reduce((count, item) => count + item.quantity, 0);
    },
    
    // 🎯 Check if product is in cart
    isInCart: (state: CartState) => (productId: string): boolean => {
      return state.items.some(item => item.id === productId);
    }
  },
  
  mutations: {
    // ➕ Add item to cart
    ADD_ITEM(state: CartState, product: Product): void {
      const existingItem = state.items.find(item => item.id === product.id);
      
      if (existingItem) {
        existingItem.quantity++;
        console.log(`🔄 Updated ${product.emoji} ${product.name} quantity`);
      } else {
        state.items.push({ ...product, quantity: 1 });
        console.log(`➕ Added ${product.emoji} ${product.name} to cart!`);
      }
    },
    
    // ➖ Remove item from cart
    REMOVE_ITEM(state: CartState, productId: string): void {
      const index = state.items.findIndex(item => item.id === productId);
      if (index > -1) {
        const item = state.items[index];
        console.log(`🗑️ Removed ${item.emoji} ${item.name} from cart`);
        state.items.splice(index, 1);
      }
    },
    
    // 🔄 Update quantity
    UPDATE_QUANTITY(state: CartState, { productId, quantity }: { productId: string; quantity: number }): void {
      const item = state.items.find(item => item.id === productId);
      if (item) {
        item.quantity = Math.max(0, quantity);
        if (item.quantity === 0) {
          // Auto-remove items with 0 quantity
          const index = state.items.findIndex(i => i.id === productId);
          state.items.splice(index, 1);
        }
      }
    },
    
    // 🧹 Clear entire cart
    CLEAR_CART(state: CartState): void {
      state.items = [];
      console.log('🧹 Cart cleared!');
    },
    
    SET_LOADING(state: CartState, loading: boolean): void {
      state.isLoading = loading;
    }
  },
  
  actions: {
    // 🛒 Add product with stock validation
    async addProduct({ commit, state }: any, product: Product): Promise<void> {
      const existingItem = state.items.find((item: CartItem) => item.id === product.id);
      const currentQuantity = existingItem ? existingItem.quantity : 0;
      
      if (currentQuantity < product.stock) {
        commit('ADD_ITEM', product);
      } else {
        console.warn(`⚠️ Cannot add more ${product.name} - out of stock!`);
      }
    },
    
    // 💳 Simulate checkout process
    async checkout({ commit, getters, state }: any): Promise<boolean> {
      if (state.items.length === 0) {
        console.warn('⚠️ Cannot checkout empty cart!');
        return false;
      }
      
      commit('SET_LOADING', true);
      
      try {
        // 🌐 Simulate API call
        await new Promise(resolve => setTimeout(resolve, 2000));
        
        console.log(`🎉 Order successful! Total: $${getters.cartTotal.toFixed(2)}`);
        commit('CLEAR_CART');
        commit('SET_LOADING', false);
        return true;
      } catch (error) {
        console.error('💥 Checkout failed:', error);
        commit('SET_LOADING', false);
        return false;
      }
    }
  }
};

// 🎮 Usage example
const store = createStore({
  modules: {
    cart: cartModule
  }
});

// 🛍️ Sample products
const products: Product[] = [
  { id: '1', name: 'TypeScript Book', price: 29.99, emoji: '📘', stock: 5 },
  { id: '2', name: 'Coffee Mug', price: 12.99, emoji: '☕', stock: 10 },
  { id: '3', name: 'Keyboard', price: 89.99, emoji: '⌨️', stock: 3 }
];

🎯 Try it yourself: Add a favorites system and implement discount code functionality!

🎮 Example 2: User Authentication State

Let’s create a complete auth system:

// 👤 User and auth types
interface User {
  id: string;
  email: string;
  name: string;
  avatar?: string;
  role: 'admin' | 'user' | 'moderator';
}

interface AuthState {
  user: User | null;
  token: string | null;
  isAuthenticated: boolean;
  isLoading: boolean;
  loginAttempts: number;
  lastLoginAt?: Date;
}

// 🔐 Authentication store module
const authModule = {
  namespaced: true,
  
  state: (): AuthState => ({
    user: null,
    token: localStorage.getItem('auth_token'),
    isAuthenticated: false,
    isLoading: false,
    loginAttempts: 0,
    lastLoginAt: undefined
  }),
  
  getters: {
    // 🎯 Check if user has specific role
    hasRole: (state: AuthState) => (role: User['role']): boolean => {
      return state.user?.role === role || false;
    },
    
    // 👤 Get user display name
    displayName: (state: AuthState): string => {
      return state.user?.name || 'Guest User 👋';
    },
    
    // 🔒 Check if user can perform action
    canPerformAction: (state: AuthState) => (requiredRole: User['role']): boolean => {
      if (!state.user) return false;
      
      const roleHierarchy = { 'user': 1, 'moderator': 2, 'admin': 3 };
      const userLevel = roleHierarchy[state.user.role];
      const requiredLevel = roleHierarchy[requiredRole];
      
      return userLevel >= requiredLevel;
    }
  },
  
  mutations: {
    // 🚀 Set authenticated user
    SET_USER(state: AuthState, user: User): void {
      state.user = user;
      state.isAuthenticated = true;
      state.lastLoginAt = new Date();
      console.log(`👋 Welcome back, ${user.name}!`);
    },
    
    // 🔑 Set auth token
    SET_TOKEN(state: AuthState, token: string): void {
      state.token = token;
      localStorage.setItem('auth_token', token);
    },
    
    // 👋 Logout user
    LOGOUT(state: AuthState): void {
      state.user = null;
      state.token = null;
      state.isAuthenticated = false;
      state.loginAttempts = 0;
      localStorage.removeItem('auth_token');
      console.log('👋 See you later!');
    },
    
    SET_LOADING(state: AuthState, loading: boolean): void {
      state.isLoading = loading;
    },
    
    // 🔄 Track login attempts
    INCREMENT_LOGIN_ATTEMPTS(state: AuthState): void {
      state.loginAttempts++;
    },
    
    RESET_LOGIN_ATTEMPTS(state: AuthState): void {
      state.loginAttempts = 0;
    }
  },
  
  actions: {
    // 🔐 Login action
    async login({ commit, state }: any, credentials: { email: string; password: string }): Promise<boolean> {
      if (state.loginAttempts >= 3) {
        console.warn('⚠️ Too many login attempts. Please try again later.');
        return false;
      }
      
      commit('SET_LOADING', true);
      
      try {
        // 🌐 Simulate API login
        await new Promise(resolve => setTimeout(resolve, 1500));
        
        // Mock successful login
        const mockUser: User = {
          id: '123',
          email: credentials.email,
          name: 'Sarah Developer',
          avatar: '👩‍💻',
          role: 'user'
        };
        
        const mockToken = 'jwt_token_here_' + Date.now();
        
        commit('SET_USER', mockUser);
        commit('SET_TOKEN', mockToken);
        commit('RESET_LOGIN_ATTEMPTS');
        commit('SET_LOADING', false);
        
        return true;
      } catch (error) {
        commit('INCREMENT_LOGIN_ATTEMPTS');
        commit('SET_LOADING', false);
        console.error('💥 Login failed:', error);
        return false;
      }
    },
    
    // 🔄 Refresh user session
    async refreshSession({ commit, state }: any): Promise<void> {
      if (!state.token) return;
      
      try {
        // 🌐 Simulate token refresh
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log('🔄 Session refreshed successfully!');
      } catch (error) {
        console.error('💥 Session refresh failed:', error);
        commit('LOGOUT');
      }
    },
    
    // 👋 Logout action
    async logout({ commit }: any): Promise<void> {
      commit('SET_LOADING', true);
      
      // 🌐 Simulate logout API call
      await new Promise(resolve => setTimeout(resolve, 500));
      
      commit('LOGOUT');
      commit('SET_LOADING', false);
    }
  }
};

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Typed Store Modules

When you’re ready to level up, try creating fully typed store modules:

// 🎯 Advanced typed module system
import { Module, ActionContext } from 'vuex';

// 🏗️ Define module state types
interface NotificationState {
  notifications: Notification[];
  maxNotifications: number;
}

interface Notification {
  id: string;
  type: 'success' | 'error' | 'warning' | 'info';
  title: string;
  message: string;
  emoji: string;
  timestamp: Date;
  autoClose: boolean;
  duration: number;
}

// 🎨 Root state interface
interface RootState {
  notifications: NotificationState;
  auth: AuthState;
  // ... other modules
}

// 🔧 Typed action context
type NotificationActionContext = ActionContext<NotificationState, RootState>;

// 🏪 Fully typed notification module
const notificationModule: Module<NotificationState, RootState> = {
  namespaced: true,
  
  state: (): NotificationState => ({
    notifications: [],
    maxNotifications: 5
  }),
  
  getters: {
    activeNotifications: (state): Notification[] => {
      return state.notifications.filter(n => !n.autoClose || 
        Date.now() - n.timestamp.getTime() < n.duration);
    },
    
    hasErrors: (state): boolean => {
      return state.notifications.some(n => n.type === 'error');
    }
  },
  
  mutations: {
    ADD_NOTIFICATION(state: NotificationState, notification: Omit<Notification, 'id' | 'timestamp'>): void {
      const newNotification: Notification = {
        ...notification,
        id: Date.now().toString(),
        timestamp: new Date()
      };
      
      state.notifications.unshift(newNotification);
      
      // Keep only max notifications
      if (state.notifications.length > state.maxNotifications) {
        state.notifications = state.notifications.slice(0, state.maxNotifications);
      }
      
      console.log(`${notification.emoji} ${notification.title}`);
    },
    
    REMOVE_NOTIFICATION(state: NotificationState, notificationId: string): void {
      const index = state.notifications.findIndex(n => n.id === notificationId);
      if (index > -1) {
        state.notifications.splice(index, 1);
      }
    }
  },
  
  actions: {
    showSuccess({ commit }: NotificationActionContext, { title, message }: { title: string; message: string }): void {
      commit('ADD_NOTIFICATION', {
        type: 'success',
        title,
        message,
        emoji: '✅',
        autoClose: true,
        duration: 3000
      });
    },
    
    showError({ commit }: NotificationActionContext, { title, message }: { title: string; message: string }): void {
      commit('ADD_NOTIFICATION', {
        type: 'error',
        title,
        message,
        emoji: '❌',
        autoClose: false,
        duration: 0
      });
    }
  }
};

🏗️ Advanced Topic 2: Store Composition with TypeScript

For complex applications, compose multiple typed modules:

// 🚀 Advanced store composition
import { createStore, Store } from 'vuex';
import { InjectionKey } from 'vue';

// 🎯 Create injection key for typed store
export const key: InjectionKey<Store<RootState>> = Symbol();

// 🏪 Composed store with all modules
export const store = createStore<RootState>({
  modules: {
    auth: authModule,
    cart: cartModule,
    notifications: notificationModule
  },
  
  // 🔧 Global plugins
  plugins: [
    // 💾 Persistence plugin
    (store) => {
      store.subscribe((mutation, state) => {
        if (mutation.type.startsWith('cart/')) {
          localStorage.setItem('cart_state', JSON.stringify(state.cart));
        }
      });
    }
  ]
});

// 🎨 Helper for typed store access in components
export function useTypedStore(): Store<RootState> {
  return useStore(key);
}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Losing Type Safety in Actions

// ❌ Wrong way - losing type information!
const badAction = async ({ commit }: any, payload: any): Promise<void> => {
  commit('SOME_MUTATION', payload); // 💥 No type checking!
};

// ✅ Correct way - maintain full type safety!
const goodAction = async (
  { commit }: ActionContext<CartState, RootState>, 
  product: Product
): Promise<void> => {
  commit('ADD_ITEM', product); // ✅ Fully typed!
};

🤯 Pitfall 2: Forgetting Namespaced Module Types

// ❌ Dangerous - accessing non-namespaced!
store.commit('ADD_ITEM', product); // 💥 Won't work with namespaced modules!

// ✅ Safe - use correct namespace!
store.commit('cart/ADD_ITEM', product); // ✅ Correctly namespaced!

😰 Pitfall 3: Mutation vs Action Confusion

// ❌ Wrong - async operation in mutation
mutations: {
  async FETCH_DATA(state): Promise<void> { // 💥 Mutations must be synchronous!
    const data = await api.getData();
    state.data = data;
  }
}

// ✅ Correct - async in actions, sync in mutations
actions: {
  async fetchData({ commit }: ActionContext<State, RootState>): Promise<void> {
    const data = await api.getData(); // ✅ Async operations belong here
    commit('SET_DATA', data); // ✅ Then commit synchronously
  }
},
mutations: {
  SET_DATA(state: State, data: any[]): void { // ✅ Synchronous only
    state.data = data;
  }
}

🛠️ Best Practices

🎯 Always Type Your State: Define interfaces for all state structures
📝 Use Namespaced Modules: Keep your store organized and prevent conflicts
🛡️ Strict Typing: Use proper ActionContext types for actions
✨ Keep Mutations Simple: Only synchronous state changes in mutations
🔄 Actions for Async: All async operations belong in actions
💾 Consider Persistence: Save important state to localStorage
🧪 Test Your Store: Write unit tests for your state management logic

🧪 Hands-On Exercise

🎯 Challenge: Build a Task Management Store

Create a complete task management system with full TypeScript support:

📋 Requirements:

✅ Tasks with title, description, status, priority, and due dates
🏷️ Categories for task organization (work, personal, urgent)
👤 User assignment and collaboration features
📊 Analytics and progress tracking
🔍 Advanced filtering and sorting
🎨 Each task needs an emoji and color coding!

🚀 Bonus Points:

Add drag-and-drop reordering
Implement task dependencies
Create time tracking functionality
Add team collaboration features
Build a dashboard with charts

💡 Solution

🔍 Click to see solution

// 🎯 Complete task management system with TypeScript!

// 📋 Task-related types
interface Task {
  id: string;
  title: string;
  description: string;
  status: 'todo' | 'in_progress' | 'completed' | 'blocked';
  priority: 'low' | 'medium' | 'high' | 'urgent';
  category: 'work' | 'personal' | 'urgent' | 'health' | 'learning';
  emoji: string;
  color: string;
  dueDate?: Date;
  createdAt: Date;
  updatedAt: Date;
  assignee?: string;
  timeSpent: number; // in minutes
  estimatedTime?: number; // in minutes
  tags: string[];
  dependencies: string[]; // task IDs this task depends on
}

interface TaskState {
  tasks: Task[];
  categories: string[];
  selectedCategory: string | null;
  sortBy: 'dueDate' | 'priority' | 'createdAt' | 'title';
  sortOrder: 'asc' | 'desc';
  isLoading: boolean;
  searchQuery: string;
}

// 🏪 Task management store module
const taskModule: Module<TaskState, RootState> = {
  namespaced: true,
  
  state: (): TaskState => ({
    tasks: [],
    categories: ['work', 'personal', 'urgent', 'health', 'learning'],
    selectedCategory: null,
    sortBy: 'dueDate',
    sortOrder: 'asc',
    isLoading: false,
    searchQuery: ''
  }),
  
  getters: {
    // 📊 Get tasks by status
    tasksByStatus: (state: TaskState) => (status: Task['status']): Task[] => {
      return state.tasks.filter(task => task.status === status);
    },
    
    // 🎯 Get filtered and sorted tasks
    filteredTasks: (state: TaskState): Task[] => {
      let filtered = state.tasks;
      
      // Filter by category
      if (state.selectedCategory) {
        filtered = filtered.filter(task => task.category === state.selectedCategory);
      }
      
      // Filter by search query
      if (state.searchQuery) {
        const query = state.searchQuery.toLowerCase();
        filtered = filtered.filter(task => 
          task.title.toLowerCase().includes(query) ||
          task.description.toLowerCase().includes(query) ||
          task.tags.some(tag => tag.toLowerCase().includes(query))
        );
      }
      
      // Sort tasks
      filtered.sort((a, b) => {
        let compareValue = 0;
        
        switch (state.sortBy) {
          case 'priority':
            const priorityOrder = { 'low': 1, 'medium': 2, 'high': 3, 'urgent': 4 };
            compareValue = priorityOrder[a.priority] - priorityOrder[b.priority];
            break;
          case 'dueDate':
            if (a.dueDate && b.dueDate) {
              compareValue = a.dueDate.getTime() - b.dueDate.getTime();
            } else if (a.dueDate) {
              compareValue = -1;
            } else if (b.dueDate) {
              compareValue = 1;
            }
            break;
          case 'createdAt':
            compareValue = a.createdAt.getTime() - b.createdAt.getTime();
            break;
          case 'title':
            compareValue = a.title.localeCompare(b.title);
            break;
        }
        
        return state.sortOrder === 'asc' ? compareValue : -compareValue;
      });
      
      return filtered;
    },
    
    // 📈 Get completion statistics
    completionStats: (state: TaskState) => {
      const total = state.tasks.length;
      const completed = state.tasks.filter(t => t.status === 'completed').length;
      const inProgress = state.tasks.filter(t => t.status === 'in_progress').length;
      const blocked = state.tasks.filter(t => t.status === 'blocked').length;
      
      return {
        total,
        completed,
        inProgress,
        blocked,
        completionRate: total > 0 ? Math.round((completed / total) * 100) : 0
      };
    },
    
    // ⏰ Get overdue tasks
    overdueTasks: (state: TaskState): Task[] => {
      const now = new Date();
      return state.tasks.filter(task => 
        task.dueDate && 
        task.dueDate < now && 
        task.status !== 'completed'
      );
    },
    
    // 🎯 Get task dependencies
    getTaskDependencies: (state: TaskState) => (taskId: string): Task[] => {
      const task = state.tasks.find(t => t.id === taskId);
      if (!task) return [];
      
      return task.dependencies
        .map(depId => state.tasks.find(t => t.id === depId))
        .filter(Boolean) as Task[];
    }
  },
  
  mutations: {
    // ➕ Add new task
    ADD_TASK(state: TaskState, taskData: Omit<Task, 'id' | 'createdAt' | 'updatedAt'>): void {
      const newTask: Task = {
        ...taskData,
        id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
        createdAt: new Date(),
        updatedAt: new Date()
      };
      
      state.tasks.unshift(newTask);
      console.log(`✅ Created task: ${newTask.emoji} ${newTask.title}`);
    },
    
    // 📝 Update existing task
    UPDATE_TASK(state: TaskState, { taskId, updates }: { taskId: string; updates: Partial<Task> }): void {
      const taskIndex = state.tasks.findIndex(t => t.id === taskId);
      if (taskIndex > -1) {
        state.tasks[taskIndex] = {
          ...state.tasks[taskIndex],
          ...updates,
          updatedAt: new Date()
        };
        console.log(`🔄 Updated task: ${state.tasks[taskIndex].title}`);
      }
    },
    
    // 🗑️ Delete task
    DELETE_TASK(state: TaskState, taskId: string): void {
      const taskIndex = state.tasks.findIndex(t => t.id === taskId);
      if (taskIndex > -1) {
        const task = state.tasks[taskIndex];
        state.tasks.splice(taskIndex, 1);
        console.log(`🗑️ Deleted task: ${task.title}`);
      }
    },
    
    // 🎯 Set category filter
    SET_CATEGORY_FILTER(state: TaskState, category: string | null): void {
      state.selectedCategory = category;
    },
    
    // 🔍 Set search query
    SET_SEARCH_QUERY(state: TaskState, query: string): void {
      state.searchQuery = query;
    },
    
    // 📊 Set sorting
    SET_SORTING(state: TaskState, { sortBy, sortOrder }: { sortBy: TaskState['sortBy']; sortOrder: TaskState['sortOrder'] }): void {
      state.sortBy = sortBy;
      state.sortOrder = sortOrder;
    },
    
    SET_LOADING(state: TaskState, loading: boolean): void {
      state.isLoading = loading;
    }
  },
  
  actions: {
    // 🚀 Create task with validation
    async createTask({ commit }: ActionContext<TaskState, RootState>, taskData: Omit<Task, 'id' | 'createdAt' | 'updatedAt'>): Promise<boolean> {
      try {
        // 🔍 Validate task data
        if (!taskData.title.trim()) {
          console.warn('⚠️ Task title is required');
          return false;
        }
        
        if (taskData.dueDate && taskData.dueDate < new Date()) {
          console.warn('⚠️ Due date cannot be in the past');
          return false;
        }
        
        commit('ADD_TASK', taskData);
        return true;
      } catch (error) {
        console.error('💥 Failed to create task:', error);
        return false;
      }
    },
    
    // ✅ Complete task
    async completeTask({ commit, getters }: ActionContext<TaskState, RootState>, taskId: string): Promise<void> {
      const task = getters.filteredTasks.find((t: Task) => t.id === taskId);
      if (task) {
        commit('UPDATE_TASK', {
          taskId,
          updates: { status: 'completed' as const }
        });
        
        // 🎉 Show success notification
        await this.dispatch('notifications/showSuccess', {
          title: 'Task Completed! 🎉',
          message: `Great job finishing "${task.title}"!`
        }, { root: true });
      }
    },
    
    // 📊 Generate productivity report
    async generateReport({ state, getters }: ActionContext<TaskState, RootState>): Promise<any> {
      const stats = getters.completionStats;
      const overdueTasks = getters.overdueTasks;
      
      const report = {
        summary: stats,
        overdueTasks: overdueTasks.length,
        categoryBreakdown: state.categories.map(category => ({
          category,
          total: state.tasks.filter(t => t.category === category).length,
          completed: state.tasks.filter(t => t.category === category && t.status === 'completed').length
        })),
        timeTracking: {
          totalTimeSpent: state.tasks.reduce((sum, task) => sum + task.timeSpent, 0),
          averageTimePerTask: state.tasks.length > 0 
            ? Math.round(state.tasks.reduce((sum, task) => sum + task.timeSpent, 0) / state.tasks.length)
            : 0
        }
      };
      
      console.log('📊 Productivity Report Generated:', report);
      return report;
    }
  }
};

// 🎮 Usage example in a component
export default {
  setup() {
    const store = useTypedStore();
    
    // 📊 Reactive computed properties
    const tasks = computed(() => store.getters['tasks/filteredTasks']);
    const stats = computed(() => store.getters['tasks/completionStats']);
    const overdueTasks = computed(() => store.getters['tasks/overdueTasks']);
    
    // 🎯 Task management methods
    const createTask = async (taskData: Omit<Task, 'id' | 'createdAt' | 'updatedAt'>): Promise<void> => {
      await store.dispatch('tasks/createTask', taskData);
    };
    
    const completeTask = async (taskId: string): Promise<void> => {
      await store.dispatch('tasks/completeTask', taskId);
    };
    
    const generateReport = async (): Promise<void> => {
      await store.dispatch('tasks/generateReport');
    };
    
    return {
      tasks,
      stats,
      overdueTasks,
      createTask,
      completeTask,
      generateReport
    };
  }
};

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

✅ Create type-safe Vuex stores with confidence 💪
✅ Avoid common state management mistakes that trip up beginners 🛡️
✅ Apply TypeScript best practices in Vue applications 🎯
✅ Debug complex state issues like a pro 🐛
✅ Build scalable applications with predictable state! 🚀

Remember: Vuex with TypeScript is your superpower for building reliable, maintainable Vue applications. The initial setup takes time, but it pays dividends in the long run! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered Vuex with TypeScript state management!

Here’s what to do next:

💻 Practice with the task management exercise above
🏗️ Build a real project using typed Vuex stores
📚 Move on to our next tutorial: Pinia with TypeScript (Modern State Management)
🌟 Share your awesome projects with the community!

Remember: Every Vue expert was once a beginner. Keep building, keep learning, and most importantly, have fun with your type-safe state management! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn