Pinia Store in Vue.js
From the Vue.js cheat sheet · State Management (Pinia) · verified Jul 2026
Pinia Store
Creating and using Pinia stores
javascript
// 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++
}
}
})
// Using in component
<script setup>
const counter = useCounterStore()
counter.increment()
</script>💡 Pinia is the official state management for Vue 3
⚡ Setup syntax is more flexible but Option syntax is clearer
📌 Use storeToRefs() to destructure state with reactivity
🔥 Stores can use other stores and share logic easily