Pinia

Add Pinia to Vue

Installation

npm install pinia

Initialize

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import vuetify from './plugins/vuetify' // Adjust if necessary

const app = createApp(App)

app.use(createPinia())
app.use(vuetify)

app.mount('#app')

Create store src/stores/counter.js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})

Usage

<script setup>
import { useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore()

</script>