Which state managers are used in the Vue ecosystem?
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:
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:
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:
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:
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.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.