pinia README

The project's README from github.com/vuejs/pinia. As one markdown file: README.md.

Pinia logo


npm package build status


Pinia

Intuitive, type safe and flexible Store for Vue

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.

👉 Demo with Vue 3 on StackBlitz

👉 Demo with Nuxt 3 on StackBlitz

Help me keep working on this project 💚

Gold Sponsors

CodeRabbit

Silver Sponsors

VueMastery Controla SendCloud

Bronze Sponsors

RTVision Storyblok

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 @vue/devtools-api

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

pinia (vuejs/pinia)

store
Searching Database…

14.7K ·GitHub
Pinia
What is this?Pinia is a state management library (store) for Vue, built with the Vue 3 composition API, offering type safety and DevTools support.
Is it a framework or a library?It is a library you add to a Vue application, not a standalone framework.
How do I add it to a project?Install the package, create a pinia instance (the root store) and pass it to your Vue app, then define stores with defineStore in separate files.
Do I need Vue 3 specifically?Yes, this version of Pinia targets Vue 3; for Vue 2 there is a separate v2 branch.
Does it support Vuex-style dynamic modules?No, dynamic modules aren't supported because they aren't type safe; instead you create separate stores that can be imported anywhere.
Is Pinia meant to replace Vuex?Yes, the README confirms Pinia is positioned as the successor to Vuex.
Does Pinia work with Nuxt?Yes, there is a dedicated Nuxt module and a demo running with Nuxt 3, plus documentation covering Nuxt configuration.
Can I have multiple stores?Yes, you can create as many stores as you want, each typically living in its own file, and access each via the function returned by defineStore.
Does Pinia support SSR?Yes, SSR is one of its listed features/topics alongside composition-api support.
Why is it called Pinia?Pinia is the closest English pronunciation of the Spanish word for pineapple (piña), chosen as a metaphor: like a pineapple's individual flowers, each store is created separately but all connected together.
What are similar projects?vueuse, nuxt, vue, nuqs, vuex, iview, vant, next-auth
Which topics is it in?store, nuxt, vuex, ssr, state-management, nextjs, vue, npm, frontend, library, typescript, javascript
Creator
vuejs
Size
10 MB
Stars
14.7K
Updated
CommitOct 14Release@pinia/[email protected]Oct 14
Age
6y
Commits · 90 Days