0Pricing
Vue Academy · Урок

Pinia против Vuex: причины перехода

Отсутствие мутаций, вывод типов TypeScript, поддержка DevTools, более простой API и модульность по умолчанию

«Pinia против Vuex: причины перехода» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Почему Pinia заменила Vuex

Pinia — официальная библиотека управления состоянием для Vue 3, рекомендуемая вместо Vuex. Она сохраняет сильные стороны Vuex, но устраняет шаблонный код и части, плохо сочетавшиеся с TypeScript.

Больше никаких мутаций

Vuex требовала использовать mutations как единственный способ изменять состояние. Pinia полностью отказывается от них — действия изменяют состояние напрямую. Меньше формальностей, меньше файлов и тот же контроль через инструменты разработчика.

// Vuex: state -> mutation -> action (3 steps)
// Pinia: action mutates state directly (1 step)
actions: {
  increment() {
    this.count++ // direct, no commit needed
  }
}

Вывод типов TypeScript из коробки

Во Vuex типизация хранилища была сложной и требовала громоздких обёрток. Pinia автоматически выводит типы из ваших state, getters и actions — дополнительный слой типизации не нужен.

const store = useCounterStore()
store.count       // inferred as number
store.doubled     // inferred from getter
store.increment() // fully typed action

Модульность в основе дизайна

Vuex использовала единое хранилище с вложенными modules, что создавало проблемы с пространствами имён. Pinia изначально модульна: отдельный файл для каждого хранилища, каждое создаётся с помощью собственного defineStore. Центральная регистрация не нужна.

// stores/counter.js
export const useCounterStore = defineStore(...)

// stores/user.js
export const useUserStore = defineStore(...)

Пространства имён не нужны

Поскольку каждое хранилище независимо и импортируется там, где используется, управлять глобальным пространством имён не нужно. Просто импортируйте нужное хранилище и вызовите его как функцию.

import { useUserStore } from '@/stores/user'
const user = useUserStore()

Поддержка инструментов разработчика

Pinia интегрируется с инструментами разработчика Vue так же, как это делала Vuex. Вы получаете временную шкалу действий, просмотр состояния и отладку с перемоткой во времени — без написания мутаций.

Меньший пакет

Pinia примерно на 1 КБ меньше Vuex и поддерживает удаление неиспользуемого кода при сборке. Хранилища, которые вы никогда не импортируете, не попадут в итоговый пакет.

Более простой программный интерфейс

Шаблонный код с mapState, mapGetters и mapActions не нужен. Вызовите композабл хранилища внутри setup и используйте возвращённый объект напрямую.

const counter = useCounterStore()
// access state, getters, and actions on one object

Работа с обоими программными интерфейсами

Pinia поддерживает Options API и Composition API. Два стиля написания хранилища — это хранилище параметров (объект) и setup-хранилище (функция); подробнее они рассматриваются далее в курсе.

Установка Pinia

Добавьте Pinia в приложение, создав экземпляр и зарегистрировав его как плагин. После этого любой компонент сможет использовать любое хранилище.

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(createPinia()).mount('#app')

Когда стоит использовать Pinia

Используйте Pinia, когда состояние нужно разделять между многими компонентами, сохранять при смене маршрутов или просматривать в инструментах разработчика. Для состояния, локального одному компоненту, обычный ref по-прежнему проще.

Быстрая проверка

Проверьте, насколько хорошо вы понимаете, почему Pinia заменила Vuex.

Итоги

Pinia — современный выбор для управления состоянием во Vue 3:

  • Нет мутаций — действия изменяют состояние напрямую.
  • Автоматический вывод типов TypeScript без обёрток.
  • Модульность: одно хранилище на файл, без пространств имён.
  • Полная поддержка инструментов разработчика и пакет примерно на 1 КБ меньше.

Часто задаваемые вопросы

Урок «Pinia против Vuex: причины перехода» бесплатный?

Да — полный текст урока «Pinia против Vuex: причины перехода» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Pinia против Vuex: причины перехода»?

Отсутствие мутаций, вывод типов TypeScript, поддержка DevTools, более простой API и модульность по умолчанию Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Pinia против Vuex: причины перехода»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Pinia против Vuex: причины перехода
  2. defineStore: состояние, геттеры и действия
  3. Композиция хранилищ и доступ между хранилищами
  4. Сохранение состояния Pinia и DevTools
← Назад к Vue Academy