tessl/npm-vuex

State management pattern and library for Vue.js applications that serves as a centralized store with predictable state mutations

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Vuex

Name: tessl/npm-vuex
Author: tessl

Vuex is a state management pattern and library for Vue.js applications that serves as a centralized store for all components with rules ensuring predictable state mutations. It provides a single source of truth for application state, implements the Flux architecture pattern with actions, mutations, getters, and modules, and integrates seamlessly with Vue's reactivity system.

Package Information

Package Name: vuex
Package Type: npm
Language: JavaScript/TypeScript
Installation: npm install vuex

Core Imports

import { createStore, useStore } from "vuex";

For CommonJS:

const { createStore, useStore } = require("vuex");

Import helpers:

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

Basic Usage

import { createStore, useStore } from "vuex";

// Create store
const store = createStore({
  state: {
    count: 0,
    todos: []
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    addTodo(state, todo) {
      state.todos.push(todo);
    }
  },
  actions: {
    async incrementAsync({ commit }) {
      await new Promise(resolve => setTimeout(resolve, 1000));
      commit('increment');
    }
  },
  getters: {
    doneTodos(state) {
      return state.todos.filter(todo => todo.done);
    }
  }
});

// In Vue 3 component (Composition API)
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();
    
    // Access state
    const count = computed(() => store.state.count);
    
    // Commit mutations
    const increment = () => store.commit('increment');
    
    // Dispatch actions
    const incrementAsync = () => store.dispatch('incrementAsync');
    
    return { count, increment, incrementAsync };
  }
};

Architecture

Vuex implements the Flux architecture pattern with several key components:

State: Single state tree that serves as the "single source of truth"
Mutations: Synchronous functions that directly modify state
Actions: Functions that can contain asynchronous operations and commit mutations
Getters: Computed properties for derived state
Modules: Namespace and organize store functionality for large applications
Plugins: Extend store functionality with custom behaviors

Capabilities

Store Creation

Core functionality for creating and configuring Vuex stores with state, mutations, actions, and getters.

function createStore<S>(options: StoreOptions<S>): Store<S>;

interface StoreOptions<S> {
  state?: S | (() => S);
  getters?: GetterTree<S, S>;
  actions?: ActionTree<S, S>;
  mutations?: MutationTree<S>;
  modules?: ModuleTree<S>;
  plugins?: Plugin<S>[];
  strict?: boolean;
  devtools?: boolean;
}

Store Management

Composition API Integration

Vue 3 Composition API integration for accessing stores in components.

function useStore<S = any>(injectKey?: InjectionKey<Store<S>> | string): Store<S>;

const storeKey: string;

Composition API

Component Helper Functions

Helper functions for mapping store properties to component computed properties and methods.

function mapState<S>(states: string[]): { [key: string]: Computed };
function mapState<S>(namespace: string, states: string[]): { [key: string]: Computed };

function mapMutations(mutations: string[]): { [key: string]: MutationMethod };
function mapMutations(namespace: string, mutations: string[]): { [key: string]: MutationMethod };

function mapGetters(getters: string[]): { [key: string]: Computed };
function mapGetters(namespace: string, getters: string[]): { [key: string]: Computed };

function mapActions(actions: string[]): { [key: string]: ActionMethod };
function mapActions(namespace: string, actions: string[]): { [key: string]: ActionMethod };

function createNamespacedHelpers(namespace: string): NamespacedMappers;

Component Helpers

Module System

Modular organization system for complex applications with namespacing and dynamic registration.

interface Module<S, R> {
  namespaced?: boolean;
  state?: S | (() => S);
  getters?: GetterTree<S, R>;
  actions?: ActionTree<S, R>;
  mutations?: MutationTree<S>;
  modules?: ModuleTree<R>;
}

interface ModuleOptions {
  preserveState?: boolean;
}

Module System

Development Tools

Development and debugging features including logging plugin and DevTools integration.

function createLogger<S>(options?: LoggerOption<S>): Plugin<S>;

interface LoggerOption<S> {
  collapsed?: boolean;
  filter?: <P extends Payload>(mutation: P, stateBefore: S, stateAfter: S) => boolean;
  transformer?: (state: S) => any;
  mutationTransformer?: <P extends Payload>(mutation: P) => any;
  actionFilter?: <P extends Payload>(action: P, state: S) => boolean;
  actionTransformer?: <P extends Payload>(action: P) => any;
  logMutations?: boolean;
  logActions?: boolean;
  logger?: Logger;
}

Development Tools

Core Types

declare class Store<S> {
  readonly state: S;
  readonly getters: any;

  install(app: App, injectKey?: InjectionKey<Store<any>> | string): void;
  
  commit: Commit;
  dispatch: Dispatch;
  
  subscribe<P extends MutationPayload>(fn: (mutation: P, state: S) => any, options?: SubscribeOptions): () => void;
  subscribeAction<P extends ActionPayload>(fn: SubscribeActionOptions<P, S>, options?: SubscribeOptions): () => void;
  watch<T>(getter: (state: S, getters: any) => T, cb: (value: T, oldValue: T) => void, options?: WatchOptions): () => void;
  
  registerModule<T>(path: string | string[], module: Module<T, S>, options?: ModuleOptions): void;
  unregisterModule(path: string | string[]): void;
  hasModule(path: string | string[]): boolean;
  
  hotUpdate(options: {
    actions?: ActionTree<S, S>;
    mutations?: MutationTree<S>;
    getters?: GetterTree<S, S>;
    modules?: ModuleTree<S>;
  }): void;
  
  replaceState(state: S): void;
}

interface Dispatch {
  (type: string, payload?: any, options?: DispatchOptions): Promise<any>;
  <P extends Payload>(payloadWithType: P, options?: DispatchOptions): Promise<any>;
}

interface Commit {
  (type: string, payload?: any, options?: CommitOptions): void;
  <P extends Payload>(payloadWithType: P, options?: CommitOptions): void;
}

interface ActionContext<S, R> {
  dispatch: Dispatch;
  commit: Commit;
  state: S;
  getters: any;
  rootState: R;
  rootGetters: any;
}

interface Payload {
  type: string;
}

interface MutationPayload extends Payload {
  payload: any;
}

interface ActionPayload extends Payload {
  payload: any;
}

type ActionHandler<S, R> = (this: Store<R>, injectee: ActionContext<S, R>, payload?: any) => any;
type Getter<S, R> = (state: S, getters: any, rootState: R, rootGetters: any) => any;
type Mutation<S> = (state: S, payload?: any) => any;
type Plugin<S> = (store: Store<S>) => any;

interface GetterTree<S, R> {
  [key: string]: Getter<S, R>;
}

interface ActionTree<S, R> {
  [key: string]: Action<S, R>;
}

type Action<S, R> = ActionHandler<S, R> | ActionObject<S, R>;

interface ActionObject<S, R> {
  root?: boolean;
  handler: ActionHandler<S, R>;
}

interface MutationTree<S> {
  [key: string]: Mutation<S>;
}

interface ModuleTree<R> {
  [key: string]: Module<any, R>;
}

interface DispatchOptions {
  root?: boolean;
}

interface CommitOptions {
  silent?: boolean;
  root?: boolean;
}

interface SubscribeOptions {
  prepend?: boolean;
}

type ActionSubscriber<P, S> = (action: P, state: S) => any;
type ActionErrorSubscriber<P, S> = (action: P, state: S, error: Error) => any;

interface ActionSubscribersObject<P, S> {
  before?: ActionSubscriber<P, S>;
  after?: ActionSubscriber<P, S>;
  error?: ActionErrorSubscriber<P, S>;
}

type SubscribeActionOptions<P, S> = ActionSubscriber<P, S> | ActionSubscribersObject<P, S>;