What is Pinia and how does it compare to Vuex?

Question

What is Pinia and how does it compare to Vuex?

Answer

Pinia is the current official state management solution for Vue 3. It was designed alongside the Composition API and is the recommended replacement for Vuex in all new projects.

Vuex vs Pinia

Vuex Store

// Verbose — mutation required to change state
const store = createStore({
  state:     () => ({ count: 0 }),
  mutations: { increment(state) { state.count++ } },
  actions:   { increment({ commit }) { commit('increment') } },
  getters:   { double: (state) => state.count * 2 },
})
store.dispatch('increment')

Equivalent Pinia Store

// Clean — no mutations layer
export const useCounterStore = defineStore('counter', () => {
  const count  = ref(0)
  const double = computed(() => count.value * 2)
  function increment() { count.value++ }
  return { count, double, increment }
})

const store = useCounterStore()
store.increment() // direct action call
store.count++     // or mutate state directly