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.
You can create as many stores as you want, and they should each exist in different files:
1import { defineStore } from'pinia'23// main is the name of the store. It is unique across your application4// and will appear in devtools5exportconst useMainStore = defineStore('main', {
6// a function that returns a fresh state7state: () => ({
8counter: 0,
9name: 'Eduardo',
10 }),
11// optional getters12getters: {
13// getters receive the state as first parameter14doubleCounter: (state) => state.counter * 2,
15// use getters in other getters16 doubleCounterPlusOne(): number {
17returnthis.doubleCounter + 118 },
19 },
20// optional actions21actions: {
22reset() {
23// `this` is the store instance24this.counter = 025 },
26 },
27})
defineStore returns a function that has to be called to get access to the store:
1import { useMainStore } from'@/stores/main'2import { storeToRefs } from'pinia'34exportdefault defineComponent({
5setup() {
6const main = useMainStore()
78// extract specific store properties9const { counter, doubleCounter } = storeToRefs(main)
1011return {
12// gives access to the whole store in the template13 main,
14// gives access only to specific state or getter15 counter,
16 doubleCounter,
17 }
18 },
19})
