Pinia и Vuex: различия
↑ 5.2 Состояние: Pinia, SSOT, Vue Query · ← Предыдущая · → Следующая
Зачем это на собесе
Легаси на Vuex ещё встречается; ждут перечня отличий и понимания миграции.
Объяснение
| Аспект | Vuex | Pinia |
|---|---|---|
| Статус | режим поддержки | официальный стор Vue |
| Мутации | обязательны (mutations синхронные + actions) | нет: state меняют напрямую или в actions |
| Модули | вложенные modules, пространства имён | независимые сторы, композиция через импорт |
| TypeScript | сложная типизация | естественная, вывод типов |
| API | Options; mapState/mapGetters/mapActions | Options и Setup, storeToRefs |
| Composition API | обходные пути | нативно |
| DevTools | да | да, time travel, история |
| SSR/HMR | да | да, проще |
| Размер | больше | ~1 КБ |
| Плагины | есть | есть, типизированные |
// Vuex
mutations: { SET_USER(state, u) { state.user = u; } },
actions: { async login({ commit }, creds) { commit("SET_USER", await api.login(creds)); } },
// Pinia
actions: { async login(creds) { this.user = await api.login(creds); } }Миграция: переносить модуль за модулем; Vuex и Pinia могут сосуществовать; заменять mapState на storeToRefs, мутации — на прямые изменения/actions, namespaced модули — на отдельные сторы (useXxxStore), rootState — на импорт другого стора.
Причины ухода от Vuex: многословность (мутации), слабая типизация, вложенные модули, сложность масштабирования.
Нюансы и подводные камни
- Мутации давали трассировку изменений — в Pinia её обеспечивает DevTools и
$onAction/$subscribe. - Прямое изменение state из компонентов поощряет разбросанные мутации: договоритесь о правилах (изменения через actions).
- В Vuex-проекте с большим числом модулей миграцию планируйте по частям.
- Плагины Vuex не совместимы с Pinia.
Практика
- Перенесите один Vuex-модуль в Pinia-стор.
- Замените
mapState/mapActionsв компонентах. - Оцените объём кода до и после.
Вопросы с ответами
Основные отличия Pinia от Vuex?
Нет мутаций и вложенных модулей, лучшая типизация, нативная поддержка Composition API, независимые сторы.
Куда исчезли мутации?
Состояние изменяется напрямую или в actions; отслеживание обеспечивают DevTools и подписки.