pinia
Go to documentationThe Vue Store that you will enjoy using
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 💚
Gold Sponsors
Silver Sponsors
Bronze Sponsors
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 yarnnpm install pinia
If you are using Vue <2.7, make sure to install latest @vue/composition-api
:
npm install pinia @vue/composition-api
Usage
Install the plugin
Create a pinia (the root store) and pass it to app:
// Vue 3import { 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')
// Vue 2import { createPinia, PiniaVuePlugin } from 'pinia'Vue.use(PiniaVuePlugin)const pinia = createPinia()new Vue({ el: '#app', // other options... // ... // note the same `pinia` instance can be used across multiple Vue apps on // the same page pinia,})
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 devtoolsexport 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.