Creating a Pinia store in Vue - Performance Optimization Steps

Performance: Creating a Pinia store

MEDIUM IMPACT

This affects the initial load time and runtime responsiveness by managing state efficiently in Vue apps.

Managing shared state across multiple Vue components

Vue

import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++; }
  }
});
// Components import and use this store for shared reactive state

Centralizes state in one reactive store, ensuring consistent updates and fewer re-renders.

📈 Performance GainSingle reactive source reduces redundant reactivity and improves input responsiveness.

Managing shared state across multiple Vue components

Vue

const count = ref(0);
export default {
  setup() {
    return { count };
  }
}; // Each component imports and uses this ref directly without a store

This causes duplicated state instances and inconsistent updates across components.

📉 Performance CostTriggers multiple re-renders and wastes memory with duplicated reactive objects.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct reactive refs in multiple components	Multiple reactive refs duplicated	Multiple re-renders per update	Higher paint cost due to redundant updates	[X] Bad
Centralized Pinia store usage	Single reactive state shared	Minimal re-renders triggered	Lower paint cost with efficient updates	[OK] Good

Rendering Pipeline

Pinia stores provide a centralized reactive state that Vue tracks efficiently, minimizing unnecessary component updates.

→JavaScript Execution

→Component Render

→Reactive Update

⚠️ BottleneckExcessive reactive state duplication causing redundant component re-renders

Core Web Vital Affected

INP

This affects the initial load time and runtime responsiveness by managing state efficiently in Vue apps.

Optimization Tips

1Centralize shared state in Pinia stores to avoid duplicated reactive refs.

2Avoid creating reactive state separately in each component for shared data.

3Use Pinia actions to update state and trigger minimal component re-renders.

Performance Quiz - 3 Questions

Why does using a Pinia store improve performance compared to using separate reactive refs in each component?

A It delays rendering until all components are loaded.

B It automatically caches all API calls to speed up data fetching.

C It centralizes state, reducing duplicated reactive objects and unnecessary re-renders.

D It removes the need for Vue's reactivity system.

DevTools: Performance

How to check: Record a performance profile while interacting with components using shared state. Look for repeated component renders and reactive updates.

What to look for: Fewer component re-renders and reactive updates indicate efficient Pinia store usage.