Что такое Pinia?

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

Основные преимущества Pinia

1. Простота API: Pinia устраняет необходимость в мутациях (mutations), которые были обязательны в Vuex, что делает код более лаконичным и понятным .
2. Поддержка Vue 2 и Vue 3: Pinia работает с обеими версиями Vue, что делает её универсальным решением для проектов на Vue .
3. Модульность: Каждый store в Pinia является независимым модулем, что упрощает организацию кода в крупных проектах .
4. Поддержка TypeScript: Pinia обеспечивает отличную интеграцию с TypeScript, включая автоматическое определение типов .
5. Плагины и расширения: Pinia поддерживает плагины, такие как pinia-plugin-persistedstate, для добавления функциональности, например, сохранения состояния в локальном хранилище .

Примеры использования Pinia

1. Установка и настройка

Для начала работы с Pinia необходимо установить её в проект:

npm install pinia

Затем инициализировать в основном файле приложения (например, main.js или main.ts):

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

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

2. Создание Store

Store в Pinia создаётся с помощью функции defineStore. Пример простого store для управления состоянием пользователя:

// stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'Иван',
    age: 25,
  }),
  getters: {
    isAdult: (state) => state.age >= 18,
  },
  actions: {
    updateName(newName) {
      this.name = newName;
    },
  },
});

3. Использование Store в компоненте

Store можно использовать в компоненте следующим образом:

<template>
  <div>
    <p>Имя: {{ userStore.name }}</p>
    <p>Возраст: {{ userStore.age }}</p>
    <p>Совершеннолетний: {{ userStore.isAdult ? 'Да' : 'Нет' }}</p>
    <button @click="updateName('Петр')">Изменить имя</button>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const updateName = (name) => userStore.updateName(name);
</script>

4. Асинхронные действия

Pinia поддерживает асинхронные действия (actions). Например, можно выполнить запрос к API:

// stores/user.js
actions: {
  async fetchUserData() {
    const response = await fetch('https://api.example.com/user');
    this.userInfo = await response.json();
  },
}

Использование в компоненте:

const fetchData = async () => {
  await userStore.fetchUserData();
};

5. Плагины для Pinia

Для сохранения состояния в локальном хранилище можно использовать плагин pinia-plugin-persistedstate:

npm install pinia-plugin-persistedstate

Настройка в основном файле:

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

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

Затем в store:

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'Иван',
  }),
  persist: true,
});

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

• Для сложных приложений: Когда требуется централизованное управление состоянием, например, для хранения данных пользователя, корзины покупок или настроек приложения .
• Для TypeScript-проектов: Pinia обеспечивает отличную поддержку TypeScript, что упрощает разработку и уменьшает количество ошибок .
• Для SSR (Server-Side Rendering): Pinia поддерживает SSR, что делает её подходящей для универсальных приложений .

Заключение

Pinia — это мощный инструмент для управления состоянием в Vue.js, который сочетает в себе простоту, гибкость и расширяемость. Она идеально подходит для современных проектов на Vue 3 и TypeScript, а также для крупных приложений, где требуется централизованное управление состоянием. Для более глубокого изучения можно обратиться к официальной документации или примерам на CodeSandbox .