Suggest an edit

Improve this article

Refine the answer for “What is a state manager?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**A state manager** is a tool or library responsible for **storing**, **changing**, and **synchronizing the shared state** of an application across different components.

In simpler terms:

> **A state manager is a centralized data store that all components can access to read or change the shared state.**

In Vue, such managers are:

- **Vuex** (Vue 2 / Vue 3, the classic approach)
- **Pinia** (the recommended state manager for Vue 3)

---

## Why is a state manager needed at all?

When an application is small, props/emits are enough.
But as it grows, problems appear:

#### 1. "Props drilling"

Data has to be pushed through many components.

#### 2. It is hard to pass data "up"

Emit only works from child to parent.

#### 3. Several components use the same logic

For example:

- authorization
- a shopping cart
- user settings
- filters
- the theme (dark/light)

#### 4. State is scattered

It is unclear who changes the data and where.

---

## What does a state manager give you?

### 1. A single store (central store)

All the data is in one place.

### 2. Predictability

All changes follow defined rules (actions, mutations).

### 3. Shared data is available to all components

No need to pass props down.

### 4. Easy to debug

There are devtools → you can see the history of changes.

### 5. Simplifies large applications

Splitting into modules and sub-stores.

---

## Example of a state manager (Pinia)

```js
import { defineStore } from 'pinia'

export const useCounter = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})
```

Usage:

```js
const counter = useCounter()
counter.increment()
console.log(counter.count)
```

---

## Example of a state manager (Vuex)

```js
const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})
```

---

## When is a state manager required?

- authorization/the current user
- a shopping cart
- global settings
- several components need to read/change the same data
- complex filter logic
- chats, notifications, real-time data
- large SPAs

Markdown · drag & drop images · ⌘B / ⌘I shortcuts349 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.