Frontend Academy · Урок

Pinia для Vue: defineStore и storeToRefs

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

Что такое Pinia

Pinia — официальная библиотека управления состоянием для Vue 3. Она заменяет Vuex более простым типобезопасным API с интеграцией DevTools, похожим на Composition API.

Установка Pinia

Установите и зарегистрируйте плагин Pinia в приложении Vue.

npm install pinia

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

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

defineStore — стиль Composition API

defineStore создаёт хранилище. В стиле Composition API ref, computed и функции используются напрямую — так же, как в компонуемой функции.

// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const doubled = computed(() => count.value * 2);
  function increment() { count.value++; }
  return { count, doubled, increment };
});

defineStore — стиль Options API

Стиль Options повторяет Options API Vue: state() для реактивных данных, геттеры (как computed) и действия (как methods).

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubled: (state) => state.count * 2,
  },
  actions: {
    increment() { this.count++; },
    async fetchAndSet(id: string) {
      this.count = await fetchCount(id);
    }
  }
});

Использование хранилища в компоненте

Вызовите хук хранилища внутри setup(). Хранилище является реактивным объектом — Вы можете напрямую читать состояние и вызывать действия.

<script setup>
import { useCounterStore } from '@/stores/counter';

const store = useCounterStore();
</script>

<template>
  <p>{{ store.count }}</p>
  <button @click="store.increment">+</button>
</template>

storeToRefs — безопасная деструктуризация

Прямая деструктуризация хранилища лишает реактивности состояние и геттеры (они становятся обычными значениями). Используйте storeToRefs() для реактивной деструктуризации.

import { storeToRefs } from 'pinia';

const store = useCounterStore();

// Actions can be destructured normally (they're functions):
const { increment } = store;

// State and getters need storeToRefs:
const { count, doubled } = storeToRefs(store);

$patch — пакетные обновления

store.$patch() применяет несколько изменений состояния как одну операцию. Это удобно для объединения связанных обновлений.

store.$patch({
  count: 10,
  name: 'Updated'
});

// Or with a function for complex logic:
store.$patch(state => {
  state.items.push(newItem);
  state.total += newItem.price;
});

$subscribe — наблюдение за изменениями хранилища

store.$subscribe(callback) реагирует на любую мутацию хранилища, подобно watch в Vue, но для всего хранилища.

Плагины Pinia

Плагины Pinia расширяют каждое хранилище. Распространённые варианты использования: сохранять состояние в localStorage, добавлять журналирование отладки или внедрять сервисы.

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

Инструменты разработчика Pinia

Pinia интегрируется с Vue DevTools. Вы можете проверять состояние хранилища, видеть, какие действия были вызваны, и перемещаться во времени между снимками состояния.

Несколько хранилищ

Создавайте по одному хранилищу для каждой предметной области (useAuthStore, useCartStore, useNotificationStore). Хранилища могут импортировать и использовать друг друга. Плоская структура Pinia (без вложенных модулей) упрощает эту задачу.

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

Почему при деструктуризации хранилища Pinia следует использовать storeToRefs()?

Итоги: Pinia

Создание хранилищ выполняется с помощью функции defineStore. Доступен стиль Composition API или Options API. Получайте доступ с помощью хука useXxxStore(). Используйте storeToRefs() для реактивной деструктуризации. Применяйте пакетные обновления для изменения нескольких значений. Используйте плагины для сохранения данных и других расширений. Доступна интеграция с DevTools. Для каждой предметной области используется отдельное хранилище — вложенных модулей в стиле Vuex нет.

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

Урок «Pinia для Vue: defineStore и storeToRefs» бесплатный?

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

Чему я научусь в уроке «Pinia для Vue: defineStore и storeToRefs»?

Определяйте хранилище Pinia с помощью defineStore, обращайтесь к нему в компонентах и используйте storeToRefs, чтобы сохранять реактивность при деструктуризации состояния. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Pinia для Vue: defineStore и storeToRefs»?

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

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

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

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

Redux Toolkit: createSlice и configureStore
Zustand для лёгкого состояния React
Pinia для Vue: defineStore и storeToRefs
Когда использовать глобальное и локальное состояние

← Назад к Frontend Academy