- Notifications
You must be signed in to change notification settings - Fork1.1k
🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
License
vuejs/pinia
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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.
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
# or pnpm or yarnnpm install piniaCreate 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.
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,}},})
To learn more about Pinia, checkits documentation.
About
🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support