vuejs/piniaPublic

NotificationsYou must be signed in to change notification settings
Fork1.1k
Star14k

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

License

MIT license

14k stars 1.1k forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 2,142 Commits
.github		.github
.vscode		.vscode
packages		packages
scripts		scripts
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc.js		.prettierrc.js
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
codecov.yml		codecov.yml
netlify.toml		netlify.toml
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
renovate.json		renovate.json
rollup.config.mjs		rollup.config.mjs
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts
vitest.workspace.js		vitest.workspace.js

Repository files navigation

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 branchv2 for a version that works with Vue 2.

Pinia is the most similar English pronunciation of the wordpineapple 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 insteadwe allow creating different stores that can be imported anywhere

Installation

# or pnpm or yarnnpm install pinia

Usage

Install the plugin

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

// Vue 3import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'constpinia=createPinia()constapp=createApp(App)app.use(pinia)app.mount('#app')

For more detailed instructions, includingNuxt configuration, check theDocumentation.

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 devtoolsexportconstuseMainStore=defineStore('main',{// a function that returns a fresh statestate:()=>({counter:0,name:'Eduardo',}),// optional gettersgetters:{// getters receive the state as first parameterdoubleCounter:(state)=>state.counter*2,// use getters in other gettersdoubleCounterPlusOne():number{returnthis.doubleCounter+1},},// optional actionsactions:{reset(){// `this` is the store instancethis.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'exportdefaultdefineComponent({setup(){constmain=useMainStore()// extract specific store propertiesconst{ 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,}},})