Vue Academy · Lesson

Pinia vs Vuex: Why the Switch

No mutations, TypeScript inference, devtools support, simpler API, modular by default.

Pinia vs Vuex: Why the Switch is a free Vue Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Pinia Replaced Vuex

Pinia is the official state management library for Vue 3, recommended over Vuex. It keeps the good parts of Vuex but removes the boilerplate and the parts that fought against TypeScript.

No More Mutations

Vuex required mutations as the only way to change state. Pinia drops them entirely — actions mutate state directly. Less ceremony, fewer files, same devtools tracking.

// Vuex: state -> mutation -> action (3 steps)
// Pinia: action mutates state directly (1 step)
actions: {
  increment() {
    this.count++ // direct, no commit needed
  }
}

TypeScript Inference Out of the Box

In Vuex, typing the store was painful and required complex wrappers. Pinia infers types automatically from your state, getters, and actions — no extra typing layer.

const store = useCounterStore()
store.count       // inferred as number
store.doubled     // inferred from getter
store.increment() // fully typed action

Modular by Design

Vuex used a single store with nested modules and namespacing headaches. Pinia is modular by nature: one file per store, each created with its own defineStore. No central registration.

// stores/counter.js
export const useCounterStore = defineStore(...)

// stores/user.js
export const useUserStore = defineStore(...)

No Namespacing Needed

Because each store is independent and imported where used, there is no global namespace to manage. You just import the store you want and call it as a function.

import { useUserStore } from '@/stores/user'
const user = useUserStore()

Devtools Support

Pinia integrates with the Vue Devtools just like Vuex did. You get a timeline of actions, state inspection, and time-travel debugging — without writing mutations.

Smaller Bundle

Pinia is roughly 1KB smaller than Vuex and tree-shakeable. Stores you never import are not included in the final bundle.

Flatter API

There is no mapState, mapGetters, mapActions boilerplate. You call the store composable inside setup and use the returned object directly.

const counter = useCounterStore()
// access state, getters, and actions on one object

Works With Both APIs

Pinia supports the Options API and Composition API. The two styles for writing a store are the option store (object) and the setup store (function), covered later in this course.

Installing Pinia

Add Pinia to your app by creating the instance and registering it as a plugin. From then on, any component can use any store.

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

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

When to Reach for Pinia

Use Pinia when state must be shared across many components, survive route changes, or be inspected in devtools. For state local to one component, plain ref is still simpler.

Quick Check

Test your understanding of why Pinia replaced Vuex.

Recap

Pinia is the modern choice for Vue 3 state:

No mutations — actions mutate state directly.
Automatic TypeScript inference, no wrappers.
Modular: one store per file, no namespacing.
Full devtools support and a ~1KB smaller bundle.

Frequently asked questions

Is the “Pinia vs Vuex: Why the Switch” lesson free?

Yes — the full text of “Pinia vs Vuex: Why the Switch” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Pinia vs Vuex: Why the Switch”?

No mutations, TypeScript inference, devtools support, simpler API, modular by default. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Pinia vs Vuex: Why the Switch” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy