Scribd
Upload
760 views2 pages

Pinia Cheat Sheet

This document provides an overview of how to use Pinia for state management in Vue applications. It demonstrates initializing a Pinia store, defining the store's state, getters, actions, and mutations. It also shows accessing the store values via the Composition and Options APIs, and subscribing to state changes. The document recommends Pinia for managing state in Vue apps and provides a link to learn more on Vue Mastery.

Uploaded by

James Panotes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
760 views2 pages

Pinia Cheat Sheet

This document provides an overview of how to use Pinia for state management in Vue applications. It demonstrates initializing a Pinia store, defining the store's state, getters, actions, and mutations. It also shows accessing the store values via the Composition and Options APIs, and subscribing to state changes. The document recommends Pinia for managing state in Vue apps and provides a link to learn more on Vue Mastery.

Uploaded by

James Panotes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Vue Mastery

Initialize Pinia for your app src/main.js

import { createPinia } from 'pinia'


createApp(App).use(createPinia()).mount('#app')

Define the store src/stores/ProductStore.js

import { defineStore } from 'pinia'

export const useProductStore = defineStore('product', { a unique name


state: () => ({
products: [ Product , Product , Product ] initialize the state
}),
getters: {
productCount(state) {
getters can access the state
return state.products.length through the parameter
},
productsCheaperThan(state) {

return (price) => ( a getter can accept an argument, but


state.products.filter(product => it has to return a function instead
product.price < price
)
)
}
change the state with actions
},
actions: {
addProduct( Product ) {
this.products.push( Product )
}
} access the state with this
})t

Use the store (Composition API) src/App.vue

<script setup>
import { useProductStore } from './stores/ProductStore'

const store = useProductStore() create a store instance


</script>
<template>
access the state directly
<ul>
<li v-for="product in store.products">
...
</li> use a getter
</ul>
<p>{{ store.productCount }}</p> use a getter that takes an argument
<ul>
<li v-for="product in store.productsCheaperThan(10)">
...
</li> use the action
</ul>
<button @click="store.addProduct( Product )">Add</button>
Vue Mastery

Use the store (Options API)

<script>
import { useProductStore } from './stores/ProductStore'
import { mapStores } from 'pinia'

export default { import the mapStore function


computed: {
...mapStores(useProductStore)
}
} map the store as a
</script> computed property
<template>
<ul>
<li v-for="product in productStore.products">
this name is the combination
...
</li> of the store’s unique name
</ul> “product” + “Store”. It is created
<p>{{ productStore.productCount }}</p> by mapStores.
<ul>
<li v-for="product in productStore.productsCheaperThan(10)">
...
</li>
</ul>
<button @click="productStore.addProduct( Product )">Add</button>

Change the state without actions

store.x = 1 store.$patch(state => {


change one thing
state.x = 1
state.y = 2
store.$patch({ x: 1, y: 2}) })
change multiple things
alternate syntax

store.$state = { x: 1, y: 2, z: 3 }
change the entire state

store.$reset()
change the entire state back to the initial values

Subscribe to changes

store.$subscribe((mutation, state) => {


... the state after the change
})
details on how the change was made

Learn Pinia now with premium courses on VueMastery.com


Visit VueMastery.com to explore our library of Vue courses.

You might also like