Toni_Dev 
19.10.2024 
1 
192 Ну что ж, пришло время поговорить о глобальном управлении состоянием в Vue-приложениях. Если вы работали с Vue 2, то наверняка помните о Vuex — официальной библиотеке для управления состоянием. Однако с Vue 3 появился новый инструмент — Pinia, который пришёл на смену Vuex и стал более лёгким, удобным и мощным.
С Pinia вы можете легко управлять состоянием вашего приложения, делая его организованным и масштабируемым. Сегодня мы разберёмся, как настроить и использовать Pinia для управления состоянием, и почему это гораздо проще, чем кажется.
Что такое Pinia?
Pinia — это официальный хранилище для Vue 3, заменяющее Vuex. Оно проще в использовании, не теряя при этом функциональности. Pinia обеспечивает реактивность состояния, модульность и позволяет легко работать с TypeScript.
Если в двух словах, Pinia позволяет вам хранить и управлять глобальными данными, которые могут быть доступны в любом месте приложения. Это решает проблему, когда данные передаются через множество компонентов или когда нужно делиться состоянием между разными частями приложения.
Установка Pinia
Как всегда, начнём с установки. Если вы используете Vite, процесс установки довольно прост:
npm install pinia
Теперь нужно подключить Pinia к вашему приложению. Откройте файл main.js и добавьте Pinia в цепочку использования вашего приложения:
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
// Создаем экземпляр Pinia
const pinia = createPinia();
// Подключаем его к приложению
app.use(pinia);
app.mount('#app');
Вот и всё! Pinia готова к использованию в вашем приложении.
Создание первого хранилища
Теперь давайте создадим хранилище, или, как его называют в Pinia, store. Хранилище — это некий глобальный объект, который может содержать состояние, геттеры (аналог computed), действия и мутации (для изменения состояния).
Создадим файл store/counter.js, который будет представлять наше первое хранилище:
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
// Начальное состояние
state: () => ({
count: 0
}),
// Геттеры — аналог computed
getters: {
doubleCount: (state) => state.count * 2
},
// Действия — аналог методов
actions: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
});
Здесь мы создаём хранилище counter с помощью функции defineStore. Внутри определяем:
- State — начальное состояние. В нашем случае это просто счётчик count, который равен 0.
- Getters — это свойства, которые вычисляются на основе состояния. Например, doubleCount возвращает удвоенное значение счётчика.
- Actions — методы, которые могут изменять состояние. Например, метод increment увеличивает счётчик, а decrement — уменьшает.
Использование хранилища в компонентах
Теперь давайте посмотрим, как использовать хранилище в компонентах. Откроем какой-нибудь компонент, например App.vue, и подключим наше хранилище counter.
<template>
<div>
<h1>Счётчик: {{ counter.count }}</h1>
<h2>Удвоенное значение: {{ counter.doubleCount }}</h2>
<button @click="counter.increment">Увеличить</button>
<button @click="counter.decrement">Уменьшить</button>
</div>
</template>
<script>
import { useCounterStore } from './store/counter';
export default {
setup() {
// Подключаем хранилище
const counter = useCounterStore();
return { counter };
}
};
</script>
Здесь всё просто: мы импортируем наше хранилище useCounterStore и подключаем его внутри функции setup. Теперь мы можем напрямую обращаться к состоянию (counter.count), геттерам (counter.doubleCount) и методам (counter.increment, counter.decrement).
Pinia автоматически делает все свойства реактивными, так что любое изменение состояния будет сразу отражаться в интерфейсе.
Модульность в Pinia
Что здорово в Pinia — это модульность. Если в вашем приложении есть несколько независимых частей, например, управление пользователями и товары в магазине, вы можете легко разделить их по разным хранилищам.
Например, создадим ещё одно хранилище для управления пользователями:
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => ({
user: null
}),
actions: {
login(userData) {
this.user = userData;
},
logout() {
this.user = null;
}
}
});
Теперь у вас есть отдельное хранилище для работы с пользователями, которое можно использовать независимо от хранилища counter. Модульный подход делает структуру более понятной и легко поддерживаемой.
Асинхронные действия
Pinia прекрасно поддерживает асинхронные действия. Допустим, вы хотите логиниться через API. Это можно сделать с использованием async внутри вашего хранилища.
Пример асинхронного действия для входа:
actions: {
async login(username, password) {
try {
const user = await api.login(username, password);
this.user = user;
} catch (error) {
console.error('Ошибка при входе:', error);
}
}
}
Pinia автоматически отслеживает все изменения, которые происходят в асинхронных действиях, так что вам не нужно беспокоиться о синхронизации данных.
Работа с Pinia и TypeScript
Если вы работаете с TypeScript, то Pinia — просто находка! Она полностью совместима с TS и позволяет вам создавать типизированные хранилища, что значительно упрощает работу в больших проектах.
Пример типизированного хранилища:
import { defineStore } from 'pinia';
interface State {
count: number;
}
export const useCounterStore = defineStore<'counter', State>({
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++;
}
}
});
Благодаря этому вы получаете все преимущества автодополнения и проверки типов, что минимизирует ошибки и упрощает разработку.
Почему Pinia лучше Vuex?
Pinia пришла на смену Vuex, и на это есть ряд причин:
- Простота: Меньше бойлерплейта, чем в Vuex. Не нужно вручную создавать мутации.
- Совместимость с Composition API: Pinia легко интегрируется с Vue 3 и его новыми возможностями.
- TypeScript: Отличная поддержка типов из коробки.
- Модульность: Простое разделение состояния на отдельные модули.
- Асинхронность: Легкость работы с асинхронными действиями.
В целом, Pinia — это новый стандарт для управления состоянием в Vue-приложениях, и его стоит использовать, если вы работаете с Vue 3.
