Установка Pinia во Vue js проект

Ну что ж, давайте приступим к изучению хранилища данных Pinia. И начнём мы с вами с установки этого инструмента. Как установить его в наш Vue-проект, давайте рассмотрим в этом видео. 

Установка Pinia

Итак, первое, что нам нужно сделать для того, чтобы установить этот инструмент - это перейти на официальный сайт Vue.js: pinia.vuejs.org. 

Далее переходим в раздел Getting Started, переходим в соответствующую вкладку, как это всегда делается для большинства дополнительных библиотек, и нам нужно установить эту библиотеку в наш проект для работы с Pinia.

Я установил чистый Vue-проект, и мы сейчас с вами установим сюда эту библиотеку. Нужно понимать, что Pinia работает у нас по умолчанию с версией Vue 3. Если же вы работаете с версией Vue 2, то соответственно здесь есть соответствующая инструкция, как можно установить этот инструмент для Vue 2. 

В нашем package.json эта библиотека была успешно добавлена, и мы можем её теперь использовать. Но, прежде чем её использовать, мы должны подключить её в наш проект. 

Подключение в файле main.js

Для этого открываем папку src, файл main.js, который мы должны с вами эту библиотеку подключить. Здесь у нас в документации показано инструкция, как это можно сделать. 

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')

Выносим createApp в константу App, таким вот образом, и далее, первое, что мы должны сделать, это импортировать эту библиотеку. Вызываем этот метод createPinia, который создаст объект хранилища, который мы должны будем с вами использовать. 

Давайте попробуем запустить наш проект: npm run serve. 

Итак, запускаем наше приложение, переходим в отладчик Vue и видим, что у нас в панели инструментов появилась иконка Pinia. Соответственно, у нас уже это хранилище доступно. Вот такое достаточно простое подключение этого хранилища, и давайте будем уже с ним знакомиться.