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 @vue/composition-api ^1.1.0-0 or Vue ^3.2.0-0.
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.
/f/86387/x/21aa32ed18/logo-normal.svg){kind=logo}
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 that can be imported anywhere
- 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 (You can directly callpinia)useOtherStore()inside of a getter or action. - Getter with params that act like computed properties (@ktsn)
yarn add pinia@next
# or with npm
npm install pinia@nextIf you are using Vue 2, make sure to install @vue/composition-api version 1.1.0 (or greater):
npm install pinia@next @vue/composition-apiCreate a pinia (the root store) and pass it to app:
import { createPinia } from 'pinia'
app.use(createPinia())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 devtools
export const useMainStore = defineStore('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:
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),
}
},
})To learn more about Pinia, check its documentation.