Store Management

/**
 * Create a new Vuex store instance
 * @param options - Store configuration options
 * @returns Store instance
 */
function createStore<S>(options: StoreOptions<S>): Store<S>;

interface StoreOptions<S> {
  /** Initial state object or function returning state */
  state?: S | (() => S);
  /** Computed getters for derived state */
  getters?: GetterTree<S, S>;
  /** Asynchronous action handlers */
  actions?: ActionTree<S, S>;
  /** Synchronous mutation handlers */
  mutations?: MutationTree<S>;
  /** Sub-modules for organizing large stores */
  modules?: ModuleTree<S>;
  /** Store plugins for extending functionality */
  plugins?: Plugin<S>[];
  /** Enable strict mode for development */
  strict?: boolean;
  /** Enable/disable DevTools integration */
  devtools?: boolean;
}

import { createStore } from "vuex";

// Basic store
const store = createStore({
  state: {
    count: 0,
    user: null
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    async fetchUser({ commit }, userId) {
      const user = await api.getUser(userId);
      commit('setUser', user);
    }
  },
  getters: {
    isLoggedIn: state => state.user !== null,
    userDisplayName: state => state.user?.name || 'Guest'
  },
  strict: process.env.NODE_ENV !== 'production'
});

// Store with modules
const store = createStore({
  modules: {
    user: userModule,
    cart: cartModule
  },
  plugins: [persistedStatePlugin, loggerPlugin]
});

/**
 * Read-only access to store state
 */
readonly state: S;

// Access state directly
const currentCount = store.state.count;
const user = store.state.user;

// Access nested module state
const cartItems = store.state.cart.items;
const userProfile = store.state.user.profile;

/**
 * Access to computed getters
 */
readonly getters: any;

// Access getters
const isLoggedIn = store.getters.isLoggedIn;
const cartTotal = store.getters['cart/total'];

// Getters with parameters
const getTodoById = store.getters.getTodoById;
const todo = getTodoById(42);

/**
 * Commit a mutation to modify state synchronously
 * @param type - Mutation type string
 * @param payload - Optional payload data
 * @param options - Commit options
 */
commit(type: string, payload?: any, options?: CommitOptions): void;

/**
 * Commit a mutation with object-style payload
 * @param payloadWithType - Object containing type and payload
 * @param options - Commit options
 */
commit<P extends Payload>(payloadWithType: P, options?: CommitOptions): void;

interface CommitOptions {
  /** Disable DevTools notification (deprecated) */
  silent?: boolean;
  /** Commit mutation in root module when called from namespaced module */
  root?: boolean;
}

// Basic mutation commit
store.commit('increment');
store.commit('setUser', { name: 'John', id: 1 });

// Object-style commit
store.commit({
  type: 'increment',
  amount: 10
});

// Namespaced mutation
store.commit('user/setProfile', profileData);

// Root commit from namespaced context
store.commit('globalReset', null, { root: true });

/**
 * Dispatch an action asynchronously
 * @param type - Action type string
 * @param payload - Optional payload data
 * @returns Promise resolving to action result
 */
dispatch(type: string, payload?: any, options?: DispatchOptions): Promise<any>;

/**
 * Dispatch an action with object-style payload
 * @param payloadWithType - Object containing type and payload
 * @param options - Dispatch options
 * @returns Promise resolving to action result
 */
dispatch<P extends Payload>(payloadWithType: P, options?: DispatchOptions): Promise<any>;

interface DispatchOptions {
  /** Dispatch action in root module when called from namespaced module */
  root?: boolean;
}

// Basic action dispatch
await store.dispatch('fetchUser', userId);
await store.dispatch('increment');

// Object-style dispatch
await store.dispatch({
  type: 'updateUser',
  user: userData
});

// Namespaced action
await store.dispatch('cart/addItem', item);

// Root dispatch from namespaced context
await store.dispatch('globalRefresh', null, { root: true });

// Handle action results
const result = await store.dispatch('validateForm', formData);
if (result.isValid) {
  // Handle success
}

/**
 * Replace the entire store state
 * @param state - New state object
 */
replaceState(state: S): void;

// Replace entire state (e.g., for SSR hydration)
store.replaceState(hydratedState);

// Reset to initial state
store.replaceState(initialState);

/**
 * Hot update store configuration
 * @param options - Updated store options
 */
hotUpdate(options: {
  actions?: ActionTree<S, S>;
  mutations?: MutationTree<S>;
  getters?: GetterTree<S, S>;
  modules?: ModuleTree<S>;
}): void;

// Hot update during development
if (module.hot) {
  module.hot.accept(['./mutations', './actions'], () => {
    const newMutations = require('./mutations').default;
    const newActions = require('./actions').default;
    
    store.hotUpdate({
      mutations: newMutations,
      actions: newActions
    });
  });
}

/**
 * Install store as Vue 3 plugin
 * @param app - Vue application instance
 * @param injectKey - Custom injection key (optional)
 */
install(app: App, injectKey?: InjectionKey<Store<any>> | string): void;

import { createApp } from 'vue';
import { createStore } from 'vuex';

const app = createApp(App);
const store = createStore({ /* options */ });

// Install with default key
app.use(store);

// Install with custom key
import { InjectionKey } from 'vue';
const key: InjectionKey<Store<StateType>> = Symbol();
app.use(store, key);