Pinia vs Vuex comparison

Introduction

Pinia and Vuex are tools to help manage data in Vue apps. They keep data organized and easy to use across many parts of your app.

When your Vue app grows and you need to share data between many components.

When you want a clear way to update and track changes in your app's data.

When you want to keep your app's state (data) predictable and easy to debug.

When you want to use the latest Vue features with simpler code.

When you want to migrate from Vuex to a more modern and easier state management.

Syntax

Vue

Pinia store example:
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

Vuex store example:
import { createStore } from 'vuex'

export const store = createStore({
  state() {
    return { count: 0 }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

Pinia uses defineStore with a simpler setup and direct state access.

Vuex uses mutations to change state and requires committing mutations.

Examples

Call the action directly on the store instance to update state.

Vue

Pinia action example:
const counter = useCounterStore()
counter.increment()

Use commit to call mutations and update state.

Vue

Vuex mutation example:
store.commit('increment')

Access state directly as properties on the store.

Vue

Pinia state access:
console.log(counter.count)

Access state inside the state object.

Vue

Vuex state access:
console.log(store.state.count)

Sample Program

This Vue app uses Pinia to create a counter store. It increments the count once and shows it in the page.

Vue

/* Pinia example */
import { createApp } from 'vue'
import { createPinia, defineStore } from 'pinia'

const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

const app = createApp({
  setup() {
    const counter = useCounterStore()
    counter.increment()
    return { count: counter.count }
  },
  template: `<div>Count: {{ count }}</div>`
})

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

Important Notes

Pinia is the official recommended state manager for Vue 3 and is simpler to learn.

Vuex is more verbose but still works well, especially in older Vue projects.

Pinia supports TypeScript better and has a smaller API surface.

Summary

Pinia is simpler and more modern than Vuex.

Both help manage shared data in Vue apps.

Pinia allows direct state access and simpler actions, Vuex uses mutations and commits.