Початок ​

Встановлення ​

Get the Pinia Cheat Sheet from Vue Mastery

Встановіть pinia за допомогою вашого улюбленого менеджера пакетів:

yarn add pinia
# або з npm
npm install pinia

yarn add pinia
# або з npm
npm install pinia

Якщо ви використовуєте Vue CLI, натомість ви можете спробувати цей неофіційний плагін.

Створіть екземпляр pinia (кореневе сховище) та передайте його додатку як плагін:

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

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

Якщо ви використовуєте Vue 2, ам також потрібно встановити плагін і додати створений pinia до кореня застосунку:

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // інші опції...
  // ...
  // зауважте, що той самий екземпляр `pinia` можна використовувати в кількох
  // застосунках Vue на тій самій сторінці
  pinia,
})

import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  el: '#app',
  // інші опції...
  // ...
  // зауважте, що той самий екземпляр `pinia` можна використовувати в кількох
  // застосунках Vue на тій самій сторінці
  pinia,
})

Це також додасть підтримку devtools. У Vue 3 деякі функції, як-от подорож у часі та редагування, досі не підтримуються, оскільки vue-devtools ще не надає необхідних API, але devtools мають значно більше можливостей, а досвід розробника в цілому набагато кращий.

що таке сховище? ​

Сховище (наприклад,Pinia) це сутність, яка містить стан і бізнес-логіку, яка не прив'язана до дерева компонентів. Іншими словами, воно містить глобальний стан. Це трохи схоже на компонент, який завжди присутній і який кожен може читати та писати. Воно має три поняття, стан, гетери та дії, та можна з упевненістю припустити, що ці поняття є еквівалентами data, computed і methods у компонентах.

Коли мені варто використовувати сховище ​

Сховище має містити дані, до яких можна отримати доступ у вашому застосунку. Це включає дані, які використовуються в багатьох місцях, наприклад, інформація про користувача, яка відображається на навігаційній панелі, а також дані, які потрібно зберегти на сторінках, наприклад, дуже складна багатоступенева форма.

З іншого боку, вам слід уникати включення до сховища локальних даних, які замість цього можуть бути розміщені в компоненті, наприклад, видимість локального елемента сторінки.

Не всім застосункам потрібен доступ до глобального стану, але якщо він потрібен вашим, Pinia полегшить ваше життя.