vuex

state management for Vue.js

weekly downloads1.5M

versionv4.1.0

licenseMIT

categorystate

Overview

Vuex is a state management library specifically designed for Vue.js applications. It implements a centralized store pattern where all application state lives in a single reactive object tree, accessible to any component regardless of its position in the component hierarchy. This eliminates the complexity of prop drilling and event bubbling that emerges when multiple components need to share data.

The library enforces strict rules about how state can be modified: all changes must occur through synchronous mutations, while asynchronous operations happen in actions that commit those mutations. This architecture makes state changes traceable and predictable, enabling powerful debugging capabilities through Vue Devtools integration. Every mutation is logged, allowing developers to step backward and forward through application history to identify when and why state changed.

With over 1.5 million weekly downloads, Vuex has been the standard state management solution for Vue.js applications since Vue 2. It's particularly valuable in medium to large applications where multiple components need coordinated access to shared data like user authentication status, shopping cart contents, or API-fetched datasets. While Pinia has become the official recommendation for new Vue 3 projects, Vuex remains widely used in production applications and continues to receive maintenance updates.

The library provides a modular architecture that scales with application complexity. Small projects can use a single store file, while larger applications can split state into namespaced modules that each handle a specific domain like users, products, or notifications. This modularity combined with TypeScript support makes Vuex suitable for enterprise-scale applications.

Quick Start

typescript

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

// Create a Vuex store with state, mutations, actions, and getters
const store = createStore({
  state() {
    return {
      user: null,
      cart: [],
      loading: false
    };
  },
  
  mutations: {
    SET_USER(state, user) {
      state.user = user;
    },
    ADD_TO_CART(state, product) {
      const existing = state.cart.find(item => item.id === product.id);
      if (existing) {
        existing.quantity++;
      } else {
        state.cart.push({ ...product, quantity: 1 });
      }
    },
    SET_LOADING(state, loading) {
      state.loading = loading;
    }
  },
  
  actions: {
    async fetchUser({ commit }, userId) {
      commit('SET_LOADING', true);
      try {
        const response = await fetch(`/api/users/${userId}`);
        const user = await response.json();
        commit('SET_USER', user);
      } finally {
        commit('SET_LOADING', false);
      }
    },
    
    addToCart({ commit }, product) {
      commit('ADD_TO_CART', product);
    }
  },
  
  getters: {
    cartTotal(state) {
      return state.cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
    },
    isAuthenticated(state) {
      return state.user !== null;
    }
  }
});

// Use in Vue component
const App = {
  template: `
    <div>
      <p v-if="isAuthenticated">Welcome, {{ user.name }}</p>
      <p>Cart Total: ${{ cartTotal }}</p>
      <button @click="addProduct">Add Product</button>
    </div>
  `,
  computed: {
    user() { return this.$store.state.user; },
    cartTotal() { return this.$store.getters.cartTotal; },
    isAuthenticated() { return this.$store.getters.isAuthenticated; }
  },
  methods: {
    addProduct() {
      this.$store.dispatch('addToCart', { id: 1, name: 'Widget', price: 29.99 });
    }
  },
  mounted() {
    this.$store.dispatch('fetchUser', 123);
  }
};

const app = createApp(App);
app.use(store);
app.mount('#app');

Use Cases

Multi-component data sharing: When user authentication state needs to be accessed by the navigation bar, profile page, and protected routes simultaneously, Vuex provides a single source of truth that all components can reactively consume without passing props through intermediate components.

Shopping cart management: E-commerce applications use Vuex to maintain cart state that persists across route changes, allowing product listing pages, cart widgets, and checkout flows to all read and update the same data while keeping the UI synchronized.

Form state coordination: Complex multi-step forms or wizards where data from multiple pages needs validation and submission as a single transaction benefit from centralized state that survives component unmounting when users navigate between steps.

API data caching: Applications that fetch data from APIs can store responses in Vuex to avoid redundant network requests, with actions handling the fetch logic and mutations updating the cached data when responses arrive.

Real-time data synchronization: Applications using WebSockets or Server-Sent Events can commit mutations when receiving server updates, ensuring all components displaying that data automatically re-render with the latest information without manual coordination.

Pros & Cons

Pros

+Centralized state eliminates prop drilling and makes data flow predictable across complex component trees
+Time-travel debugging through Vue Devtools lets you inspect every state mutation and rewind application history
+Strict separation between synchronous mutations and asynchronous actions makes state changes traceable and testable
+Modular architecture with namespacing supports scaling to large applications without store becoming unmanageable
+Reactive state integration means components automatically update when store data changes without manual subscriptions

Cons

−Significant boilerplate required with separate mutations, actions, and getters for even simple state updates
−Mutation/action distinction can feel overly verbose for small to medium applications that don't need strict traceability
−TypeScript support requires additional type definitions and can be cumbersome compared to more modern alternatives
−Pinia is now the official recommendation for Vue 3, meaning Vuex is in maintenance mode with no major new features planned
−Learning curve for developers unfamiliar with Flux-style architecture who expect simpler reactive object patterns

Alternatives

piniav3.0.4

Intuitive, type safe and flexible Store for Vue

statevuevuex

2.8M / week

reduxv5.0.1

Predictable state container for JavaScript apps

statereduxreducer

20.8M / week

zustandv5.0.11

🐻 Bear necessities for state management in React

statereactstate

20.2M / week

Comparisons

pinia vs vuex

state

Install

bash

npm install vuex

bash

pnpm add vuex

bash

bun add vuex

Overview

Quick Start

typescript

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

// Create a Vuex store with state, mutations, actions, and getters
const store = createStore({
  state() {
    return {
      user: null,
      cart: [],
      loading: false
    };
  },
  
  mutations: {
    SET_USER(state, user) {
      state.user = user;
    },
    ADD_TO_CART(state, product) {
      const existing = state.cart.find(item => item.id === product.id);
      if (existing) {
        existing.quantity++;
      } else {
        state.cart.push({ ...product, quantity: 1 });
      }
    },
    SET_LOADING(state, loading) {
      state.loading = loading;
    }
  },
  
  actions: {
    async fetchUser({ commit }, userId) {
      commit('SET_LOADING', true);
      try {
        const response = await fetch(`/api/users/${userId}`);
        const user = await response.json();
        commit('SET_USER', user);
      } finally {
        commit('SET_LOADING', false);
      }
    },
    
    addToCart({ commit }, product) {
      commit('ADD_TO_CART', product);
    }
  },
  
  getters: {
    cartTotal(state) {
      return state.cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
    },
    isAuthenticated(state) {
      return state.user !== null;
    }
  }
});

// Use in Vue component
const App = {
  template: `
    <div>
      <p v-if="isAuthenticated">Welcome, {{ user.name }}</p>
      <p>Cart Total: ${{ cartTotal }}</p>
      <button @click="addProduct">Add Product</button>
    </div>
  `,
  computed: {
    user() { return this.$store.state.user; },
    cartTotal() { return this.$store.getters.cartTotal; },
    isAuthenticated() { return this.$store.getters.isAuthenticated; }
  },
  methods: {
    addProduct() {
      this.$store.dispatch('addToCart', { id: 1, name: 'Widget', price: 29.99 });
    }
  },
  mounted() {
    this.$store.dispatch('fetchUser', 123);
  }
};

const app = createApp(App);
app.use(store);
app.mount('#app');

Use Cases

Pros & Cons

Pros

+Centralized state eliminates prop drilling and makes data flow predictable across complex component trees
+Time-travel debugging through Vue Devtools lets you inspect every state mutation and rewind application history
+Strict separation between synchronous mutations and asynchronous actions makes state changes traceable and testable
+Modular architecture with namespacing supports scaling to large applications without store becoming unmanageable
+Reactive state integration means components automatically update when store data changes without manual subscriptions

Cons

−Significant boilerplate required with separate mutations, actions, and getters for even simple state updates
−Mutation/action distinction can feel overly verbose for small to medium applications that don't need strict traceability
−TypeScript support requires additional type definitions and can be cumbersome compared to more modern alternatives
−Pinia is now the official recommendation for Vue 3, meaning Vuex is in maintenance mode with no major new features planned
−Learning curve for developers unfamiliar with Flux-style architecture who expect simpler reactive object patterns