Suggest an edit

Improve this article

Refine the answer for “Which state managers are used in the Vue ecosystem?”. 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)

## 1. Pinia (the recommended store for Vue 3)

**Status:** the official state manager for Vue 3 (replaces Vuex)
**Developer:** the Vue team
**Advantages:**

- works on the Composition API
- simpler API than Vuex
- no mutations, just state + getters + actions
- TypeScript-friendly
- modularity out of the box
- supports SSR

**Example:**

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

---

## 2. Vuex (the classic store for Vue 2 and Vue 3)

**Status:** legacy (aging out), still supported but NOT recommended for new projects.

**Advantages:**

- strict one-directional data flow
- a familiar architecture (state -> getters -> mutations -> actions)
- a rich ecosystem

**Example:**

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

---

## Additional state managers that show up less often

These libraries **are not an official part of Vue**, but are sometimes used.

---

## 3. Zustand-like, Recoil-like solutions with the Composition API

Many teams use **composable functions** as a lightweight store:

```js
export function useUser() {
  const user = ref(null)
  const setUser = (val) => user.value = val
  return { user, setUser }
}
```

This is a simple way to store global state without Vuex/Pinia.

---

## 4. Vue Observable (Vue 2 only, deprecated)

The method:

```js
Vue.observable({})
```

It was used to create a simple reactive store.
It does not exist in Vue 3.

---

## 5. External cross-framework state managers

Sometimes used:

- **Redux**
- **MobX**
- **XState** (state machines)
- **RxJS** (reactive streams)

But these are rare in pure Vue projects.

---

## Summary (great for an interview)

> **The Vue ecosystem has two main state managers: Pinia (the primary, recommended one for Vue 3) and Vuex (the classic one for Vue 2 / aging out for Vue 3).**
> **You can also manage state through composables or third-party libraries, but that's rare.**

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.