Skip to content
/ pinia Public

🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support

License

Notifications You must be signed in to change notification settings

vuejs/pinia

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Feb 17, 2025
3b21e08 Β· Feb 17, 2025
Feb 11, 2025
Oct 14, 2021
Feb 12, 2025
Feb 11, 2025
Nov 28, 2024
Jul 13, 2022
Jul 26, 2024
Nov 22, 2024
Aug 17, 2021
Feb 9, 2025
Nov 29, 2024
Oct 2, 2024
Feb 5, 2024
Feb 17, 2025
Feb 12, 2025
Mar 31, 2022
Mar 29, 2021
Feb 12, 2025
Oct 11, 2023
Feb 12, 2025
Nov 22, 2024

Repository files navigation

Pinia logo


npm package build status


Pinia

Intuitive, type safe and flexible Store for Vue

  • πŸ’‘ Intuitive
  • πŸ”‘ Type Safe
  • βš™οΈ Devtools support
  • πŸ”Œ Extensible
  • πŸ— Modular by design
  • πŸ“¦ Extremely light
  • ⛰️ Nuxt Module

The latest version of pinia works with Vue 3. See the branch v2 for a version that works with Vue 2.

Pinia is the most similar English pronunciation of the word pineapple in Spanish: piΓ±a. A pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar to stores, each one is born individually, but they are all connected at the end. It's also a delicious tropical fruit indigenous to South America.

Help me keep working on this project πŸ’š

Silver Sponsors

Route Optimizer and Route Planner Software Prefect VueMastery

Bronze Sponsors

Storyblok Nuxt UI Pro Templates Antony Konstantinidis Stanislas Ormières


FAQ

A few notes about the project and possible questions:

Q: Is Pinia the successor of Vuex?

A: Yes

Q: What about dynamic modules?

A: Dynamic modules are not type safe, so instead we allow creating different stores that can be imported anywhere

Installation

# or pnpm or yarn
npm install pinia

Usage

Install the plugin

Create a pinia (the root store) and pass it to app:

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

For more detailed instructions, including Nuxt configuration, check the Documentation.

Create a Store

You can create as many stores as you want, and they should each exist in different files:

import { defineStore } from 'pinia'

// main is the name of the store. It is unique across your application
// and will appear in devtools
export const useMainStore = defineStore('main', {
  // a function that returns a fresh state
  state: () => ({
    counter: 0,
    name: 'Eduardo',
  }),
  // optional getters
  getters: {
    // getters receive the state as first parameter
    doubleCounter: (state) => state.counter * 2,
    // use getters in other getters
    doubleCounterPlusOne(): number {
      return this.doubleCounter + 1
    },
  },
  // optional actions
  actions: {
    reset() {
      // `this` is the store instance
      this.counter = 0
    },
  },
})

defineStore returns a function that has to be called to get access to the store:

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

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

    // extract specific store properties
    const { counter, doubleCounter } = storeToRefs(main)

    return {
      // gives access to the whole store in the template
      main,
      // gives access only to specific state or getter
      counter,
      doubleCounter,
    }
  },
})

Documentation

To learn more about Pinia, check its documentation.

License

MIT