PiniaThe Vue Store that you will enjoy using

Quick Start ​

Installation ​

npm install pinia

yarn add pinia

pnpm add pinia

Basic Usage ​

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

// 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++
    }
  }
})

<!-- Use in component -->
<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment()">Increment</button>
  </div>
</template>

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

const counter = useCounterStore()
</script>

Why Choose Pinia? ​

Pinia is the official state management library for Vue.js, providing a simpler and more intuitive API while maintaining powerful functionality:

• 🎯 Simple and Intuitive: Clean API design with low learning curve
• 🔄 Composition API Friendly: Perfect support for Vue 3's Composition API
• 📱 SSR Support: Server-side rendering works out of the box
• 🧪 Easy to Test: Each store can be tested independently
• 🔌 Rich Plugin Ecosystem: Extensive plugin ecosystem for various needs

Ready to get started? Check out our Getting Started Guide or learn about Pinia's Core Concepts.