Goodbye Vuex, Hello Pinia

Remember how we struggled with Vuex? Endless mutations, weird commit and dispatch syntax, and TypeScript types that became a real headache. It seems the Vue team heard our prayers and released Pinia. This isn't just another state management library, but the official successor to Vuex that makes a frontend developer's life significantly better.

By the way, the name is a fun wordplay. Pinia sounds like the Spanish word «piña» (pineapple). The creators compare a store to a pineapple: it's a group of individual flowers that together form a single fruit. Each store in your application is born on its own, but in the end they work as one team.

What It Is and Why You Need It

In short, Pinia is a lightweight store for Vue that fully supports the Composition API. It weighs only about 1 KB, supports hot module reloading, and plays nicely with DevTools.

The main difference from the old approach is the absence of mutations. Now you can change state directly in actions, which significantly reduces the amount of boilerplate code. If you're working with Vue 3, Pinia is the de facto standard. For those still on Vue 2, there's backward compatibility, so the migration won't be a disaster.

Why Developers Choose This Store

I've identified several points that really change the workflow.

TypeScript Support Out of the Box

In Vuex, typing often felt like using crutches. In Pinia, everything is different. It's written in TypeScript, so autocompletion works perfectly. You don't need to manually describe interfaces for every getter or action — the library figures out what you're returning on its own.

Modularity Without Extra Complexity

Forget about nested modules and complex paths to them. In Pinia, you simply create different stores in different files and import them where needed. This makes the architecture cleaner: each component takes only the data it actually needs.

import { defineStore } from 'pinia'

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

Simple Integration

You can connect the library with just a couple of lines of code. It's nice that it works great with Nuxt and supports server-side rendering (SSR).

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

How It Works in Practice

Imagine you have a shopping cart in an online store. Before, you'd have to register a module, keep track of path naming, and write actions that call mutations. With Pinia, you simply call the store method in a component like a regular function.

For retrieving data without losing reactivity, there's a convenient storeToRefs helper. This saves you when you need to destructure a store without breaking its connection to the state.

import { useCartStore } from '@/stores/cart'
import { storeToRefs } from 'pinia'

const cart = useCartStore()
const { items, total } = storeToRefs(cart)

Is It Worth Switching

If you're starting a new Vue 3 project, there are practically no alternatives to Pinia. It's simpler, faster, and more modern. If you have an old Vuex project, there's no need to rush, but for new features I'd recommend trying this approach.

The project is actively maintained by Eduardo San Martin Morote (posva), who is part of the Vue core team. This gives confidence that the library won't disappear in a month. Plus, Pinia has excellent documentation and a lively community.

You can try the project in action on StackBlitz:

• Demo with Vue 3
• Demo with Nuxt 3

Who it's definitely for:

1. Those who are tired of Vuex verbosity.
2. TypeScript fans who appreciate quality autocompletion.
3. Nuxt 3 developers, where Pinia is the recommended solution.

Perhaps the only downside — if you're used to Vuex's rigid structure with mandatory mutations, Pinia's freedom might seem strange at first. But you get used to good things quickly.