What is the difference between Pinia and Vuex?

Overview

Pinia is the officially recommended state management library for Vue 3 and the modern successor to Vuex.

Syntax Comparison

Vuex (verbose)

// store/counter.js (Vuex)
export default {
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) { state.count++ }
  },
  actions: {
    async incrementAsync({ commit }) {
      await delay(1000)
      commit('increment')
    }
  },
  getters: {
    doubled: state => state.count * 2
  }
}

// Usage
store.commit('increment')         // mutation
store.dispatch('incrementAsync')  // action
store.getters.doubled             // getter

Pinia (clean)

// stores/counter.js (Pinia)
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubled = computed(() => count.value * 2)

  function increment() { count.value++ }
  async function incrementAsync() {
    await delay(1000)
    increment()
  }

  return { count, doubled, increment, incrementAsync }
})

// Usage
const counter = useCounterStore()
counter.increment()        // direct call
counter.incrementAsync()   // async works the same way
counter.doubled            // computed getter

Key Differences

Feature	Vuex	Pinia
Vue version	Vue 2 / 3	Primarily Vue 3
Mutations	✅ Required	❌ Modify state directly
TypeScript	Fair	✅ First-class support
DevTools	✅	✅
Modularity	Nested modules	Multiple independent stores
Syntax	Verbose	Clean (like Composition API)
Bundle size	Larger	Smaller (~1KB)

Recommendation

For all new Vue 3 projects, use Pinia. Vuex 4 is only kept for maintaining legacy projects.