# Pinia
> Intuitive, type safe and flexible Store for Vue
- 💡 Intuitive
- 🔑 Type Safe
- ⚙️ Devtools support
- 🔌 Extensible
- 🏗 Modular by design
- 📦 Extremely light
Pinia works both for Vue 2.x and Vue 3.x. It requires Vue 2 with the latest `@vue/composition-api` or Vue `^3.2.0-0`.
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](https://stackblitz.com/github/piniajs/example-vue-3-vite)
## 👉 [Demo with Nuxt 3 on StackBlitz](https://stackblitz.com/github/piniajs/example-nuxt-3)
## Help me keep working on this project 💚
- [Become a Sponsor on GitHub](https://github.com/sponsors/posva)
- [One-time donation via PayPal](https://paypal.me/posva)
Platinum Sponsors
Gold Sponsors
Silver Sponsors
Bronze Sponsors
---
## FAQ
A few notes about the project and possible questions:
**Q**: _Does this replace Vuex, is it its successor?_
**A**: No, or at least that's not the main intention
**Q**: _What about dynamic modules?_
**A**: Dynamic modules are not type safe, so instead [we allow creating different stores](https://pinia.vuejs.org/cookbook/composing-stores.html) that can be imported anywhere
## Roadmap / Ideas
- [x] Should the state be merged at the same level as actions and getters?
- [ ] ~~Allow grouping stores together into a similar structure and allow defining new getters (`pinia`)~~
You can directly call `useOtherStore()` inside of a getter or action.
- [ ] ~~Getter with params that act like computed properties (@ktsn)~~ Can be implement through a custom composable and passed directly to state.
## Installation
```bash
yarn add pinia
# or with npm
npm install pinia
```
If you are using Vue 2, make sure to install latest `@vue/composition-api`:
```bash
npm install pinia @vue/composition-api
```
## Usage
### Install the plugin
Create a pinia (the root store) and pass it to app:
```js
import { createPinia } from 'pinia'
app.use(createPinia())
```
### Create a Store
You can create as many stores as you want, and they should each exist in different files:
```ts
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
doubleCount: (state) => state.counter * 2,
// use getters in other getters
doubleCountPlusOne(): number {
return this.doubleCount * 2 + 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:
```ts
import { useMainStore } from '@/stores/main'
import { storeToRefs } from 'pinia'
export default defineComponent({
setup() {
const main = useMainStore()
// extract specific store properties
const { counter, doubleCount } = storeToRefs(main)
return {
// gives access to the whole store in the template
main,
// gives access only to specific state or getter
counter,
doubleCount,
}
},
})
```
## Documentation
To learn more about Pinia, check [its documentation](https://pinia.vuejs.org).
## License
[MIT](http://opensource.org/licenses/MIT)
