# pinia
**Repository Path**: osAce/pinia
## Basic Information
- **Project Name**: pinia
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: docs/moving-logo
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-16
- **Last Updated**: 2021-07-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 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 and you are currently on the branch that supports Vue 3.x. **If you are looking for the version compatible with Vue 2.x, check the [`v1` branch](https://github.com/posva/pinia/tree/v1)**.
Pinia is 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 on CodeSandbox](https://j4qzw.csb.app/)
## 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)
Gold Sponsors
/f/86387/x/4cf6a70a8c/logo-white-text.svg)
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](#composing-stores) 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)
## Installation
```bash
yarn add pinia@next
# or with npm
npm install pinia@next
```
## Usage
### Install the plugin
Create a pinia (the root store) and pass it to app:
```js
import { createPinia } from 'pinia'
app.use(createPinia())
```
This will also add devtools support. Some features like time traveling and editing are still not supported because vue-devtools doesn't expose the necessary APIs yet.
### Creating a Store
You can create as many stores as you want, and they should each exist in different files:
```ts
import { defineStore } from 'pinia'
export const useMainStore = defineStore({
// name of the store
// it is used in devtools and allows restoring state
id: 'main',
// a function that returns a fresh state
state: () => ({
counter: 0,
name: 'Eduardo',
}),
// optional getters
getters: {
doubleCount() {
return this.counter * 2
},
// use getters in other getters
doubleCountPlusOne() {
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'
export default defineComponent({
setup() {
const main = useMainStore()
return {
// gives access to the whole store
main,
// gives access only to specific state
state: computed(() => main.counter),
// gives access to specific getter; like `computed` properties
doubleCount: computed(() => main.doubleCount),
}
},
})
```
## Documentation
To learn more about Pinia, check [its documentation](https://pinia.esm.dev).
## License
[MIT](http://opensource.org/licenses/MIT)