What is a state manager?

VueJunior~1 min read

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)

import { defineStore } from 'pinia'

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

Usage:

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

Example of a state manager (Vuex)

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

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.