Часть 4. Управление состоянием с помощью Pinia

Введение в Pinia

Pinia – это современная библиотека для управления состоянием в приложениях на Vue.js. Она является официальной заменой Vuex и предлагает более простой и гибкий способ работы с состоянием. В этом посте мы настроим Pinia и создадим простой пример управления состоянием.

Установка Pinia

1. Если вы еще не установили Pinia, сделайте это, выполнив следующую команду - npm i @pinia/nuxt 2. Добавьте Pinia в файл nuxt.config.ts (по умолчанию Nuxt должен сделать это сам, если вы используете devtools, но если этого не произошло, добавьте следующий код) export default defineNuxtConfig({ modules: [ '@pinia/nuxt' ] })

Создание хранилища с Pinia

Создайте директорию stores в корне вашего проекта, если она еще не существует. В этой директории создайте файл stores/*.js и добавьте ваш код.

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

Теперь мы можем использовать наше хранилище в компонентах. Если вы используете Nuxt, то импорт должен произойти автоматически. Ниже представлен код, который подключает хранилище в компоненте.

const store = use*Store(), где * - название вашего хранилища

Заключение

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

Если у вас возникнут вопросы, не стесняйтесь задавать их!