Component Helpers

/**
 * Map store state to computed properties
 * @param states - Array of state property names
 * @returns Object with computed property functions
 */
function mapState(states: string[]): { [key: string]: Computed };

/**
 * Map store state with custom names
 * @param stateMap - Object mapping component names to state paths
 * @returns Object with computed property functions
 */
function mapState(stateMap: Record<string, string>): { [key: string]: Computed };

/**
 * Map namespaced store state to computed properties
 * @param namespace - Module namespace
 * @param states - Array of state property names
 * @returns Object with computed property functions
 */
function mapState(namespace: string, states: string[]): { [key: string]: Computed };

/**
 * Map namespaced store state with custom names
 * @param namespace - Module namespace
 * @param stateMap - Object mapping component names to state paths
 * @returns Object with computed property functions
 */
function mapState(namespace: string, stateMap: Record<string, string>): { [key: string]: Computed };

/**
 * Map store state with custom getter functions
 * @param stateMap - Object mapping names to getter functions
 * @returns Object with computed property functions
 */
function mapState<S>(stateMap: Record<string, (state: S, getters: any) => any>): { [key: string]: Computed };

/**
 * Map namespaced store state with custom getter functions
 * @param namespace - Module namespace
 * @param stateMap - Object mapping names to getter functions
 * @returns Object with computed property functions
 */
function mapState<S>(namespace: string, stateMap: Record<string, (state: S, getters: any) => any>): { [key: string]: Computed };

import { mapState } from 'vuex';

// Options API component
export default {
  computed: {
    // Array form - maps to same names
    ...mapState(['count', 'user']),
    // Equivalent to:
    // count() { return this.$store.state.count; }
    // user() { return this.$store.state.user; }
    
    // Object form - custom names
    ...mapState({
      localCount: 'count',
      currentUser: 'user'
    }),
    
    // Function form - custom computation
    ...mapState({
      countPlusOne: state => state.count + 1,
      userDisplayName: (state, getters) => 
        state.user ? state.user.name : 'Guest'
    }),
    
    // Namespaced module
    ...mapState('cart', ['items', 'total']),
    ...mapState('user', {
      profile: 'profile',
      preferences: 'settings.preferences'
    })
  }
};

/**
 * Map store getters to computed properties
 * @param getters - Array of getter names
 * @returns Object with computed property functions
 */
function mapGetters(getters: string[]): { [key: string]: Computed };

/**
 * Map store getters with custom names
 * @param getterMap - Object mapping component names to getter names
 * @returns Object with computed property functions
 */
function mapGetters(getterMap: Record<string, string>): { [key: string]: Computed };

/**
 * Map namespaced store getters to computed properties
 * @param namespace - Module namespace
 * @param getters - Array of getter names
 * @returns Object with computed property functions
 */
function mapGetters(namespace: string, getters: string[]): { [key: string]: Computed };

/**
 * Map namespaced store getters with custom names
 * @param namespace - Module namespace
 * @param getterMap - Object mapping component names to getter names
 * @returns Object with computed property functions
 */
function mapGetters(namespace: string, getterMap: Record<string, string>): { [key: string]: Computed };

import { mapGetters } from 'vuex';

export default {
  computed: {
    // Array form
    ...mapGetters(['isLoggedIn', 'userDisplayName']),
    
    // Object form with custom names
    ...mapGetters({
      loggedIn: 'isLoggedIn',
      userName: 'userDisplayName'
    }),
    
    // Namespaced getters
    ...mapGetters('cart', ['total', 'itemCount']),
    ...mapGetters('user', {
      hasProfile: 'hasCompletedProfile',
      avatarUrl: 'profileAvatarUrl'
    })
  }
};

/**
 * Map store mutations to methods
 * @param mutations - Array of mutation names
 * @returns Object with method functions
 */
function mapMutations(mutations: string[]): { [key: string]: MutationMethod };

/**
 * Map store mutations with custom names
 * @param mutationMap - Object mapping component names to mutation names
 * @returns Object with method functions
 */
function mapMutations(mutationMap: Record<string, string>): { [key: string]: MutationMethod };

/**
 * Map namespaced store mutations to methods
 * @param namespace - Module namespace
 * @param mutations - Array of mutation names
 * @returns Object with method functions
 */
function mapMutations(namespace: string, mutations: string[]): { [key: string]: MutationMethod };

/**
 * Map namespaced store mutations with custom names
 * @param namespace - Module namespace
 * @param mutationMap - Object mapping component names to mutation names
 * @returns Object with method functions
 */
function mapMutations(namespace: string, mutationMap: Record<string, string>): { [key: string]: MutationMethod };

/**
 * Map store mutations with custom functions
 * @param mutationMap - Object mapping names to functions receiving commit
 * @returns Object with method functions
 */
function mapMutations(mutationMap: Record<string, (commit: Commit, ...args: any[]) => any>): { [key: string]: MutationMethod };

/**
 * Map namespaced store mutations with custom functions
 * @param namespace - Module namespace
 * @param mutationMap - Object mapping names to functions receiving commit
 * @returns Object with method functions
 */
function mapMutations(namespace: string, mutationMap: Record<string, (commit: Commit, ...args: any[]) => any>): { [key: string]: MutationMethod };

type MutationMethod = (...args: any[]) => void;

import { mapMutations } from 'vuex';

export default {
  methods: {
    // Array form
    ...mapMutations(['increment', 'decrement']),
    // Equivalent to:
    // increment(payload) { this.$store.commit('increment', payload); }
    
    // Object form with custom names
    ...mapMutations({
      add: 'increment',
      subtract: 'decrement'
    }),
    
    // Function form for custom logic
    ...mapMutations({
      incrementBy: (commit, amount) => commit('increment', amount),
      reset: (commit) => {
        commit('setCount', 0);
        commit('clearHistory');
      }
    }),
    
    // Namespaced mutations
    ...mapMutations('cart', ['addItem', 'removeItem']),
    ...mapMutations('user', {
      updateProfile: 'setProfile',
      clearSession: 'logout'
    })
  }
};

/**
 * Map store actions to methods
 * @param actions - Array of action names
 * @returns Object with method functions
 */
function mapActions(actions: string[]): { [key: string]: ActionMethod };

/**
 * Map store actions with custom names
 * @param actionMap - Object mapping component names to action names
 * @returns Object with method functions
 */
function mapActions(actionMap: Record<string, string>): { [key: string]: ActionMethod };

/**
 * Map namespaced store actions to methods
 * @param namespace - Module namespace
 * @param actions - Array of action names
 * @returns Object with method functions
 */
function mapActions(namespace: string, actions: string[]): { [key: string]: ActionMethod };

/**
 * Map namespaced store actions with custom names
 * @param namespace - Module namespace
 * @param actionMap - Object mapping component names to action names
 * @returns Object with method functions
 */
function mapActions(namespace: string, actionMap: Record<string, string>): { [key: string]: ActionMethod };

/**
 * Map store actions with custom functions
 * @param actionMap - Object mapping names to functions receiving dispatch
 * @returns Object with method functions
 */
function mapActions(actionMap: Record<string, (dispatch: Dispatch, ...args: any[]) => any>): { [key: string]: ActionMethod };

/**
 * Map namespaced store actions with custom functions
 * @param namespace - Module namespace
 * @param actionMap - Object mapping names to functions receiving dispatch
 * @returns Object with method functions
 */
function mapActions(namespace: string, actionMap: Record<string, (dispatch: Dispatch, ...args: any[]) => any>): { [key: string]: ActionMethod };

type ActionMethod = (...args: any[]) => Promise<any>;

import { mapActions } from 'vuex';

export default {
  methods: {
    // Array form
    ...mapActions(['fetchUser', 'updateUser']),
    // Equivalent to:
    // fetchUser(payload) { return this.$store.dispatch('fetchUser', payload); }
    
    // Object form with custom names
    ...mapActions({
      getUser: 'fetchUser',
      saveUser: 'updateUser'
    }),
    
    // Function form for custom logic
    ...mapActions({
      loadUserProfile: (dispatch, userId) => 
        dispatch('fetchUser', userId).then(user => 
          dispatch('fetchUserPreferences', user.id)
        ),
      refreshData: async (dispatch) => {
        await dispatch('clearCache');
        await dispatch('fetchInitialData');
      }
    }),
    
    // Namespaced actions
    ...mapActions('cart', ['addItem', 'checkout']),
    ...mapActions('user', {
      login: 'authenticate',
      logout: 'signOut'
    }),
    
    // Using mapped actions
    async handleLogin() {
      try {
        await this.login(credentials);
        this.$router.push('/dashboard');
      } catch (error) {
        this.showError(error.message);
      }
    }
  }
};

/**
 * Create pre-bound helper functions for a specific namespace
 * @param namespace - Module namespace
 * @returns Object with namespaced helper functions
 */
function createNamespacedHelpers(namespace: string): NamespacedMappers;

interface NamespacedMappers {
  mapState: Mapper<Computed> & MapperForState;
  mapMutations: Mapper<MutationMethod> & MapperForMutation;
  mapGetters: Mapper<Computed>;
  mapActions: Mapper<ActionMethod> & MapperForAction;
}

import { createNamespacedHelpers } from 'vuex';

// Create helpers for 'user' namespace
const { mapState, mapActions, mapMutations } = createNamespacedHelpers('user');

export default {
  computed: {
    // These automatically use the 'user' namespace
    ...mapState(['profile', 'preferences']),
    ...mapGetters(['isAuthenticated', 'displayName'])
  },
  methods: {
    ...mapMutations(['setProfile', 'clearSession']),
    ...mapActions(['login', 'logout', 'updateProfile'])
  }
};

// Multiple namespaced helpers
const userHelpers = createNamespacedHelpers('user');
const cartHelpers = createNamespacedHelpers('cart');

export default {
  computed: {
    ...userHelpers.mapState(['profile']),
    ...cartHelpers.mapState(['items', 'total'])
  },
  methods: {
    ...userHelpers.mapActions(['login']),
    ...cartHelpers.mapActions(['addItem', 'checkout'])
  }
};

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    // Global state
    ...mapState(['loading', 'error']),
    
    // Global getters
    ...mapGetters(['isReady', 'currentRoute']),
    
    // User module state
    ...mapState('user', {
      userProfile: 'profile',
      userPrefs: 'preferences'
    }),
    
    // Cart module getters
    ...mapGetters('cart', ['itemCount', 'total']),
    
    // Custom computed
    canCheckout() {
      return this.isReady && this.itemCount > 0 && this.userProfile;
    }
  },
  
  methods: {
    // Global mutations
    ...mapMutations(['setLoading', 'setError']),
    
    // Global actions
    ...mapActions(['initialize', 'cleanup']),
    
    // User module actions
    ...mapActions('user', {
      signIn: 'login',
      signOut: 'logout'
    }),
    
    // Cart module mutations and actions
    ...mapMutations('cart', ['clearCart']),
    ...mapActions('cart', ['checkout']),
    
    // Custom method using mapped helpers
    async handleCheckout() {
      this.setLoading(true);
      try {
        const result = await this.checkout();
        if (result.success) {
          this.clearCart();
          this.$router.push('/order-confirmation');
        }
      } catch (error) {
        this.setError(error.message);
      } finally {
        this.setLoading(false);
      }
    }
  }
};