📦
State Management2M+/wkMIT

vuex

Vuex is the legacy state management pattern and library for Vue.js applications, serving as a centralized store that ensures state mutations are predictable thr

Installation

npm
npm install vuex
yarn
yarn add vuex
pnpm
pnpm add vuex

Import

ESM
import { createStore } from 'vuex';

Quick Example

usage
import { createStore } from 'vuex';

const store = createStore({
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) { state.count++; },
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => commit('increment'), 1000);
    },
  },
});

About vuex

Vuex is the legacy state management pattern and library for Vue.js applications, serving as a centralized store that ensures state mutations are predictable through a strict unidirectional data flow. Vuex stores contain state (the single source of truth), getters (computed derived state), mutations (synchronous state changes), actions (async operations that commit mutations), and modules for splitting large stores into domain-specific sections. The library enforces that state can only be changed through mutations, which are pure synchronous functions, making state changes trackable and debuggable through Vue DevTools' time-travel feature. Vuex modules support namespacing for preventing naming collisions in large applications, and support dynamic module registration for lazy-loaded features. While Vuex was the standard state management solution for Vue 2 applications and is still compatible with Vue 3, Pinia has officially replaced it as the recommended approach. Pinia offers a simpler API, better TypeScript support, and removes the mutations concept that many developers found redundant. Vuex remains in maintenance mode and is still widely used in existing Vue 2 applications. Migration from Vuex to Pinia is straightforward due to their similar concepts.

Quick Facts

Packagevuex
CategoryState Management
Weekly Downloads2M+
LicenseMIT
Installnpm install vuex

Related Packages

Browse npm Packages by Category

Explore our reference of 200 popular npm packages with install commands, examples, and quick-start guides.