# Vuex — Centralized State Management for Vue.js

> Vuex is the official state management library for Vue.js applications, providing a single store with mutations, actions, getters, and module support for predictable state updates.

## Install

Save in your project root:

# Vuex — Centralized State Management for Vue.js

## Quick Use
```bash
npm install vuex@next
```
```js
import { createStore } from 'vuex'
const store = createStore({
  state: { count: 0 },
  mutations: { increment(state) { state.count++ } }
})
```

## Introduction
Vuex is the official centralized state management library for Vue.js. It serves as a single source of truth for shared application state, enforcing a strict unidirectional data flow through mutations, actions, and getters. It integrates deeply with Vue's reactivity system and DevTools.

## What Vuex Does
- Centralizes component state in a single reactive store
- Enforces state changes only through synchronous mutations for traceability
- Supports asynchronous logic via actions that commit mutations
- Provides getters for computed derived state across components
- Enables modular store organization with namespaced modules

## Architecture Overview
Vuex's store wraps Vue's reactivity: state properties become reactive, so components re-render when state changes. Mutations are synchronous functions that directly modify state and are logged by DevTools for time-travel debugging. Actions encapsulate async operations (API calls) and commit mutations when done. Modules let large apps split the store into isolated, namespaced sub-stores that compose into the root store.

## Self-Hosting & Configuration
- Install with `npm install vuex@next` for Vue 3 or `npm install vuex` for Vue 2
- Create a store file and pass it to your Vue app via `app.use(store)`
- Enable strict mode during development to catch direct state mutations
- Organize large stores into module files under a `store/modules/` directory
- Use Vuex plugins for persistence (vuex-persistedstate) or logging

## Key Features
- Time-travel debugging via Vue DevTools with mutation history snapshots
- Strict mode throws errors when state is mutated outside mutations
- Namespaced modules prevent naming collisions in large applications
- Hot module replacement for store modules during development
- Plugin system for extending store behavior (logging, persistence, sync)

## Comparison with Similar Tools
- **Pinia** — The recommended successor for Vue 3 with simpler API, better TypeScript support, and no mutations concept
- **Redux** — Similar centralized pattern for React; more boilerplate but larger ecosystem
- **Zustand** — Minimal React state manager; Vuex is Vue-specific with deeper integration
- **MobX** — Observable-based; less explicit than Vuex's mutation-driven approach
- **Jotai** — Atomic React state; Vuex manages state as a single tree

## FAQ
**Q: Should I use Vuex or Pinia for new Vue 3 projects?**
A: The Vue team recommends Pinia for new projects. Vuex remains fully supported for existing codebases.

**Q: Can Vuex work with the Vue 3 Composition API?**
A: Yes. You can access the store via `useStore()` inside `setup()` functions.

**Q: How do I persist Vuex state across page reloads?**
A: Use the vuex-persistedstate plugin, which saves state to localStorage or sessionStorage automatically.

**Q: Is Vuex suitable for small applications?**
A: For simple cases, Vue's built-in `reactive` or `provide/inject` may be enough. Vuex shines when multiple components share complex state.

## Sources
- https://github.com/vuejs/vuex
- https://vuex.vuejs.org

---
Source: https://tokrepo.com/en/workflows/asset-8d356c95
Author: AI Open Source