Why I Use a State Manager Like Pinia

---

When I first started building larger apps in Vue, I stuck to the basics: props, emits, and provide/inject. It worked - for a while.

But in one particular project, things got out of hand.

---

The pain of managing state with props and inject

The project had dozens of components deeply nested inside each other. To pass a single piece of data from the top-level layout to some child component five levels deep, we relied either on:

• Long prop chains
  (which meant every intermediate component had to forward the value)

• provide/inject pairs
  (which made it really hard to figure out where the value was coming from)

When something broke, or needed to be updated globally, I had to scroll through multiple files just to understand the data flow. Debugging it felt like tracing a spider web.

That was the point where I knew I needed a central state manager.

---

Why I chose Pinia

Pinia is the official state management solution for Vue. It’s lightweight, modular, TypeScript-friendly, and incredibly easy to use.

With Pinia, I can:

• Define global state once and use it anywhere
• Share logic across components without props
• Track updates in devtools
• Keep code clean and focused

---

A simple example

Let’s say we want to store the current user and their authentication status.

// stores/user.ts
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    isLoggedIn: false,
  }),
  actions: {
    login(name: string) {
      this.name = name;
      this.isLoggedIn = true;
    },
    logout() {
      this.name = '';
      this.isLoggedIn = false;
    },
  },
});

You can use this store in any component:

// components/Navbar.vue
<script setup lang="ts">
import { useUserStore } from '@/stores/user';

const user = useUserStore();
</script>

<template>
  <nav>
    <p v-if="user.isLoggedIn">Hello, {{ user.name }}!</p>
    <button @click="user.logout">Logout</button>
  </nav>
</template>

No props. No inject. No tracking data flow across five components. Just a clean, accessible store.

My final thoughts

Using a store like Pinia doesn’t mean you should stop using props entirely - but you should avoid passing the same piece of data down multiple layers just to get it to a deeply nested component.

Pinia gave me:

• Clarity in architecture
• Faster development
• Easier debugging
• Better scalability

If your project is starting to feel like a bowl of spaghetti, it might be time to reach for a proper state manager.