Pinia vs Vuex: Which Should You Choose?

Pinia is now the official state management solution for Vue. Let’s compare it with Vuex to understand the differences.

Pinia Example

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    isLoggedIn: false
  }),
  
  getters: {
    greeting: (state) => `Hello, ${state.name}!`
  },
  
  actions: {
    async login(credentials) {
      const user = await api.login(credentials)
      this.name = user.name
      this.isLoggedIn = true
    }
  }
})

Key Differences

Feature	Pinia	Vuex
Mutations	No	Yes
TypeScript	Excellent	Good
Devtools	Built-in	Built-in
Bundle Size	~1KB	~10KB
Modules	Flat stores	Nested

Pinia Composition Style

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }
  
  return { count, doubleCount, increment }
})

Recommendation

Choose Pinia for new projects - it’s simpler, more intuitive, and officially recommended.

Migrate from Vuex when possible - the migration path is straightforward.