# или pnpm или yarn
npm install pinia

npm install pinia @vue/composition-api

// Vue 3
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
import { createPinia, PiniaVuePlugin } from 'pinia'

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

new Vue({
  el: '#app',
  // другие параметры...
  // ...
  // обратите внимание, что один и тот же экземпляр `pinia` может использоваться в нескольких приложениях Vue на одной странице
  pinia,
})

import { defineStore } from 'pinia'

// main — это имя магазина. Оно уникально для вашего приложения и будет отображаться в devtools
export const useMainStore = defineStore('main', {
  // функция, которая возвращает новое состояние
  state: () => ({
    counter: 0,
    name: 'Eduardo',
  }),
  // необязательные геттеры
  getters: {
    // геттеры получают состояние в качестве первого параметра
    doubleCounter: (state) => state.counter * 2,
    // используйте геттеры в других геттерах
    doubleCounterPlusOne(): number {
      return this.doubleCounter + 1
    },
  },
  // необязательные действия
  actions: {
    reset() {
      // `this` — это экземпляр магазина
      this.counter = 0
    },
  }
})

import { useMainStore } from '@/stores/main'
import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const main = useMainStore()

    // извлечь конкретные свойства магазина
    const { counter, doubleCounter } = storeToRefs(main)

    return {
      // предоставляет доступ ко всему магазину в шаблоне
      main,
      // даёт доступ только к определённому состоянию или геттеру
      counter,
      doubleCounter,
    }
  }
})