Persisting store state in Vue - Performance & Optimization

Performance: Persisting store state

MEDIUM IMPACT

This concept affects page load speed and interaction responsiveness by managing how store data is saved and restored across sessions.

Saving and restoring Vuex or Pinia store state across page reloads

Vue

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return { count: 0 };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  plugins: [store => {
    const savedCount = localStorage.getItem('count');
    if (savedCount) {
      store.replaceState({ count: JSON.parse(savedCount) });
    }
    window.addEventListener('beforeunload', () => {
      localStorage.setItem('count', JSON.stringify(store.state.count));
    });
  }]
});

Loads state once on startup and saves state only on page unload, reducing blocking and reflows.

📈 Performance GainSingle synchronous read on load; saves state on unload; reduces blocking and reflows.

Saving and restoring Vuex or Pinia store state across page reloads

Vue

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return { count: 0 };
  },
  mutations: {
    increment(state) {
      state.count++;
      localStorage.setItem('count', JSON.stringify(state.count));
    }
  },
  plugins: [store => {
    const savedCount = localStorage.getItem('count');
    if (savedCount) {
      store.replaceState({ count: JSON.parse(savedCount) });
    }
  }]
});

Saving state on every mutation and reading from localStorage synchronously blocks rendering and causes multiple reflows on load.

📉 Performance CostBlocks rendering for 50-100ms on load; triggers multiple reflows due to synchronous localStorage access.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Saving state on every mutation synchronously	Minimal	Multiple reflows on load	High due to blocking	[X] Bad
Load once on startup, save on unload	Minimal	Single reflow	Low blocking	[OK] Good

Rendering Pipeline

Persisting store state involves reading from and writing to storage, which can block the main thread and delay style calculation and layout if done synchronously during rendering.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckSynchronous localStorage access during initial load blocks Style Calculation and Layout.

Core Web Vital Affected

LCP

This concept affects page load speed and interaction responsiveness by managing how store data is saved and restored across sessions.

Optimization Tips

1Avoid synchronous localStorage access during rendering.

2Load persisted state once before app mount to reduce blocking.

3Save state on page unload or idle time to minimize reflows.

Performance Quiz - 3 Questions

What is the main performance risk of saving store state synchronously on every mutation?

A It reduces JavaScript bundle size.

B It blocks rendering and causes multiple reflows.

C It increases network requests.

D It improves initial load speed.

DevTools: Performance

How to check: Record a page reload and look for long tasks blocking main thread during startup; check for synchronous localStorage calls.

What to look for: Look for long blocking times in scripting and style/layout phases indicating synchronous storage access.