Pinia

Intuitive, type safe, light and flexible Store for Vue using the compositio...

State managementVue
vuejs/piniapinia.vuejs.orgpinia

README

Pinia logo


npm package build status code coverage



Pinia


Intuitive, type safe and flexible Store for Vue


- 💡 Intuitive
- 🔑 Type Safe
- ⚙️ Devtools support
- 🔌 Extensible
- 🏗 Modular by design
- 📦 Extremely light

Pinia works with both Vue 2 and Vue 3.

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 💚


- Become a Sponsor on GitHub
- One-time donation via PayPal

Gold Sponsors

VueJobs

Silver Sponsors

VueMastery Prefect

Bronze Sponsors

Stanislas Ormières Antony Konstantinidis Storyblok NuxtJS



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


  1. ``` sh
  2. # or pnpm or yarn
  3. npm install pinia
  4. ```

If you are using Vue <2.7, make sure to install latest @vue/composition-api:

  1. ``` sh
  2. npm install pinia @vue/composition-api
  3. ```

Usage


Install the plugin


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

  1. ``` js
  2. // Vue 3
  3. import { createApp } from 'vue'
  4. import { createPinia } from 'pinia'
  5. import App from './App.vue'

  7. const pinia = createPinia()
  8. const app = createApp(App)

  10. app.use(pinia)
  11. app.mount('#app')
  12. ```

  1. ``` js
  2. // Vue 2
  3. import { createPinia, PiniaVuePlugin } from 'pinia'

  5. Vue.use(PiniaVuePlugin)
  6. const pinia = createPinia()

  8. new Vue({
  9.   el: '#app',
  10.   // other options...
  11.   // ...
  12.   // note the same `pinia` instance can be used across multiple Vue apps on
  13.   // the same page
  14.   pinia,
  15. })
  16. ```

Create a Store


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

  1. ```ts
  2. import { defineStore } from 'pinia'

  4. // main is the name of the store. It is unique across your application
  5. // and will appear in devtools
  6. export const useMainStore = defineStore('main', {
  7.   // a function that returns a fresh state
  8.   state: () => ({
  9.     counter: 0,
  10.     name: 'Eduardo',
  11.   }),
  12.   // optional getters
  13.   getters: {
  14.     // getters receive the state as first parameter
  15.     doubleCounter: (state) => state.counter * 2,
  16.     // use getters in other getters
  17.     doubleCounterPlusOne(): number {
  18.       return this.doubleCounter + 1
  19.     },
  20.   },
  21.   // optional actions
  22.   actions: {
  23.     reset() {
  24.       // `this` is the store instance
  25.       this.counter = 0
  26.     },
  27.   },
  28. })
  29. ```

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

  1. ```ts
  2. import { useMainStore } from '@/stores/main'
  3. import { storeToRefs } from 'pinia'

  5. export default defineComponent({
  6.   setup() {
  7.     const main = useMainStore()

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

  12.     return {
  13.       // gives access to the whole store in the template
  14.       main,
  15.       // gives access only to specific state or getter
  16.       counter,
  17.       doubleCounter,
  18.     }
  19.   },
  20. })
  21. ```

Documentation


To learn more about Pinia, check its documentation.

License


MIT