Skip to content
← All questions
Beginner

What is Pinia and how does it differ from Vuex?

State Management

Pinia is the official store for Vue 3 (replaces Vuex). Key differences:

VuexPinia
MutationsYes (required)Don't exist
TypeScriptLimited supportNative support
StoresModules inside 1 storeIndependent stores
SyntaxOptions or SetupOptions or Setup
DevToolsYesYes
CompositionComplex (namespaced modules)Simple (import and use)
ts
// Pinia store
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCartStore = defineStore('cart', () => {
  const items = ref<CartItem[]>([])
  const total = computed(() => items.value.reduce((sum, i) => sum + i.price, 0))

  function addItem(item: CartItem) {
    items.value.push(item)
  }

  return { items, total, addItem }
})

Released under the MIT License.