**Два синтаксиса определения store:** Setup (Composition API) — рекомендуемый: ```javascript // stores/user.js import { defineStore } from 'pinia' import { ref, computed } from 'vue' export const useUserStore = defineStore('user', () => { // State — ref и reactive const user = ref(null) const preferences = ref({ theme: 'light', language: 'ru', }) // Getters — computed const isLoggedIn = computed(() => user.value !== null) const displayName = computed( () => user.value?.name ?? 'Гость' ) // Actions — обычные функции (могут быть async) async function login(email, password) { const response = await api.post('/auth/login', { email, password }) user.value = response.data.user } function logout() { user.value = null } function updatePreference(key, value) { preferences.value[key] = value } // Возвращай только то, что нужно снаружи return { user, preferences, isLoggedIn, displayName, login, logout, updatePreference, } }) ``` Options API синтаксис (если привычнее): ```javascript // stores/user.js — Options стиль export const useUserStore = defineStore('user', { state: () => ({ user: null, preferences: { theme: 'light', language: 'ru', }, }), getters: { isLoggedIn: (state) => state.user !== null, displayName: (state) => state.user?.name ?? 'Гость', }, actions: { async login(email, password) { const response = await api.post('/auth/login', { email, password }) this.user = response.data.user // this — это store }, logout() { this.user = null }, }, }) ``` Оба синтаксиса дают одинаковый результат. Setup лучше: TypeScript выводит типы сам, можно использовать watchers, composables, приватные переменные. **Использование в компоненте:** ```vue ``` **Приватные переменные в Setup-синтаксисе:** ```javascript export const useAuthStore = defineStore('auth', () => { const user = ref(null) const token = ref(null) // Приватный — НЕ в return let refreshTimer = null function startTokenRefresh() { refreshTimer = setInterval(async () => { const response = await api.post('/auth/refresh') token.value = response.data.token }, 15 * 60 * 1000) } function stopTokenRefresh() { clearInterval(refreshTimer) refreshTimer = null } async function login(credentials) { const response = await api.post('/auth/login', credentials) user.value = response.data.user token.value = response.data.token startTokenRefresh() // Приватная логика } function logout() { user.value = null token.value = null stopTokenRefresh() } // refreshTimer НЕ возвращаем — он приватный return { user, token, login, logout } }) ``` **Сброс store:** ```javascript const userStore = useUserStore() userStore.$reset() // Сбросить state к начальным значениям // ⚠️ $reset() работает только с Options-синтаксисом! ``` Для Setup-синтаксиса реализуй вручную: ```javascript export const useUserStore = defineStore('user', () => { const user = ref(null) const preferences = ref({ theme: 'light', language: 'ru' }) function $reset() { user.value = null preferences.value = { theme: 'light', language: 'ru' } } return { user, preferences, $reset } }) ``` --- ## 📌 Реальные кейсы **Кейс: Store с composable внутри** ```javascript // stores/notifications.js import { defineStore } from 'pinia' import { ref, computed } from 'vue' import { useWebSocket } from '@vueuse/core' // Composable! export const useNotificationStore = defineStore('notifications', () => { const notifications = ref([]) const unreadCount = computed( () => notifications.value.filter((n) => !n.read).length ) // VueUse composable прямо в store const { data, status } = useWebSocket('wss://api.example.com/ws', { autoReconnect: true, onMessage(ws, event) { const notification = JSON.parse(event.data) notifications.value.unshift(notification) }, }) function markAsRead(id) { const notification = notifications.value.find((n) => n.id === id) if (notification) notification.read = true } function clearAll() { notifications.value = [] } return { notifications, unreadCount, status, markAsRead, clearAll } }) ``` Это невозможно в Vuex Options API. В Pinia Setup-синтаксисе composables работают нативно. --- ## Частые ошибки ❌ Забывать `storeToRefs` при деструктуризации: ```javascript const { count } = useCounterStore() // count — число, НЕ реактивный ref. Не обновится в шаблоне. ``` ✅ Разделять state/getters и actions: ```javascript const store = useCounterStore() const { count } = storeToRefs(store) // ref const { increment } = store // функция — storeToRefs не нужен ``` --- ❌ Создавать store внутри функции, которая вызывается до app.use(pinia): ```javascript // Ошибка: Pinia ещё не установлена const store = useUserStore() // Pinia not installed! const app = createApp(App) app.use(createPinia()) ``` ✅ Вызывать useStore после app.use(pinia) или внутри setup: ```javascript const app = createApp(App) app.use(createPinia()) // Теперь можно const store = useUserStore() ``` --- ❌ Мутировать state через `$patch` без необходимости: ```javascript // Излишне для единичного изменения store.$patch({ count: store.count + 1 }) ``` ✅ `$patch` полезен для batch-обновлений: ```javascript // Одно уведомление DevTools вместо трёх store.$patch((state) => { state.count++ state.lastUpdated = Date.now() state.history.push('increment') }) ``` --- ## Резюме | Концепция | Setup-синтаксис | Options-синтаксис | |---|---|---| | State | `ref()`, `reactive()` | `state: () => ({})` | | Getters | `computed()` | `getters: {}` | | Actions | Обычные функции | `actions: {}` | | Приватное | Не включай в return | Невозможно | | Composables | Нативно | Невозможно | | `$reset()` | Реализуй вручную | Автоматический | Setup-синтаксис — используй по умолчанию. Он мощнее, гибче, лучше типизируется. --- ---

Как создать store в Pinia?