Які state manager'и використовуються в екосистемі Vue?
1. Pinia (рекомендований стор для Vue 3)
Статус: офіційний state manager для Vue 3 (заміна Vuex) Розробник: команда Vue Переваги:
- працює на Composition API
- простіший API, ніж у Vuex
- немає мутацій -> лише state + getters + actions
- TypeScript-friendly
- модульність "з коробки"
- підтримує SSR
Приклад:
export const useCounter = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++
}
}
})2. Vuex (класичний стор для Vue 2 і Vue 3)
Статус: legacy (застаріває), підтримується, але НЕ рекомендується для нових проєктів.
Переваги:
- строгий однонаправлений потік даних
- звична архітектура (state -> getters -> mutations -> actions)
- багата екосистема
Приклад:
const store = createStore({
state: { count: 0 },
mutations: {
increment(state) {
state.count++
}
}
})Додаткові менеджери стану, які трапляються рідше
Ці бібліотеки не є офіційною частиною Vue, але іноді використовуються.
3. Zustand-like, Recoil-like рішення з Composition API
Багато команд використовують composable-функції як легкий стор:
export function useUser() {
const user = ref(null)
const setUser = (val) => user.value = val
return { user, setUser }
}Це простий спосіб зберігання глобального стану без Vuex/Pinia.
4. Vue Observable (лише Vue 2, застаріло)
Метод:
Vue.observable({})Використовували для створення простого реактивного стору. У Vue 3 відсутній.
5. Зовнішні крос-фреймворкові state manager'и
Іноді використовують:
- Redux
- MobX
- XState (машини станів)
- RxJS (reactive streams)
Але в чистих Vue-проєктах трапляється рідко.
Підсумок (ідеально для співбесіди)
В екосистемі Vue використовуються два основних менеджери стану: Pinia (основний і рекомендований для Vue 3) і Vuex (класичний для Vue 2 / застаріває для Vue 3). Також можна використовувати state через composables або сторонні бібліотеки, але це рідкість.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.