How to use Pinia store in Vue 3
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Pinia is the official state management solution for Vue 3, replacing Vuex with a more intuitive and TypeScript-friendly API. As the creator of CoreUI with extensive Vue development experience since 2014, I’ve migrated numerous applications from Vuex to Pinia for better developer experience. The setup involves creating a store with defineStore and using it within components through direct property access. Pinia provides excellent TypeScript support and eliminates the verbosity of traditional Vuex mutations.
Create a Pinia store using defineStore and access it directly in components with useStore.
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++
}
}
})
// Component.vue
import { useCounterStore } from '@/stores/counter'
export default {
setup() {
const store = useCounterStore()
return {
count: computed(() => store.count),
increment: store.increment
}
}
}
This code creates a counter store with state and actions, then uses it in a component. Unlike Vuex, Pinia allows direct property access and mutation through actions without requiring separate mutation functions. The store is reactive, so components automatically update when state changes, providing seamless reactivity throughout your application.
Best Practice Note:
This is the approach we use in CoreUI Vue components for centralized state management. Pinia’s intuitive API and excellent TypeScript support make it the preferred choice over Vuex for modern Vue 3 applications.
