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.

Practice

1. What is the main purpose of persisting store state in a Vue application?

easy

A. To speed up the app by caching components

B. To keep the app data saved even after refreshing or closing the browser

C. To automatically update the UI without user input

D. To prevent users from logging out

Solution

1. Step 1: Understand what persisting store state means

   Persisting store state means saving the app's data so it does not disappear when the page reloads or the browser closes.

2. Step 2: Identify the main benefit

   This helps keep user data or app settings intact, improving user experience.

3. Final Answer:

   To keep the app data saved even after refreshing or closing the browser -> Option B

4. Quick Check:

   Persisting state = saving data after refresh [OK]

Hint: Persisting means saving data beyond page reloads [OK]

Common Mistakes:

• Confusing persisting with caching UI components
• Thinking it automatically updates UI without user action
• Believing it prevents user logout directly

2. Which of the following is the correct way to add the vuex-persistedstate plugin to a Vuex store?

easy

A. import createPersistedState from 'vuex-persistedstate';

const store = createStore({
plugins: createPersistedState
});

B. import createPersistedState from 'vuex-persistedstate';

const store = createStore({
persist: createPersistedState()
});

C. import createPersistedState from 'vuex-persistedstate';

const store = createStore({
plugins: [createPersistedState()]
});

D. import createPersistedState from 'vuex-persistedstate';

const store = createStore({
plugins: [createPersistedState]
});

Solution

1. Step 1: Recall the plugin usage syntax

   The vuex-persistedstate plugin is imported as a function and added inside the plugins array when creating the store.

2. Step 2: Check the correct syntax

   import createPersistedState from 'vuex-persistedstate'; const store = createStore({ plugins: [createPersistedState()] }); correctly imports and calls createPersistedState() inside the plugins array.

3. Final Answer:

   import createPersistedState from 'vuex-persistedstate'; const store = createStore({ plugins: [createPersistedState()] }); -> Option C

4. Quick Check:

   Plugin added as function in plugins array [OK]

Hint: Plugins go inside plugins array, called as functions [OK]

Common Mistakes:

• Putting plugin directly as object property instead of in plugins array
• Not calling the plugin function with ()
• Passing plugin without wrapping in array

3. Given this Vuex store setup with vuex-persistedstate:

import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

const store = createStore({
  state() {
    return { count: 0 };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  plugins: [createPersistedState()]
});

store.commit('increment');

// After page reload, what is the value of store.state.count?

medium

A. 1

B. Error

C. undefined

D. 0

Solution

1. Step 1: Understand what happens on commit

   The mutation increment increases count from 0 to 1.

2. Step 2: Effect of vuex-persistedstate plugin

   This plugin saves the state to localStorage, so after page reload, the state is restored with count still 1.

3. Final Answer:

   1 -> Option A

4. Quick Check:

   Persisted state restores count = 1 after reload [OK]

Hint: Persisted state keeps mutations after reload [OK]

Common Mistakes:

• Assuming state resets to initial value after reload
• Thinking plugin does not save mutations
• Confusing undefined or error with normal behavior

4. You added vuex-persistedstate to your Vuex store but the state is not saved after refresh. Which of these is the most likely cause?

medium

A. You forgot to call the plugin function inside the plugins array

B. You did not import Vuex correctly

C. You used mutations instead of actions

D. You did not define the initial state

Solution

1. Step 1: Check plugin usage

   If the plugin is added without calling it as a function (missing parentheses), it won't activate and save state.

2. Step 2: Verify other options

   Importing Vuex correctly, using mutations, and defining initial state are unrelated to plugin activation.

3. Final Answer:

   You forgot to call the plugin function inside the plugins array -> Option A

4. Quick Check:

   Plugin must be called as function to work [OK]

Hint: Always call plugin with () inside plugins array [OK]

Common Mistakes:

• Adding plugin without parentheses
• Blaming mutations or initial state for persistence issues
• Ignoring plugin import errors

5. You want to persist only the user part of your Vuex state and store it in sessionStorage instead of localStorage. Which is the correct way to configure vuex-persistedstate?

hard

A. plugins: [createPersistedState({ only: ['user'], storage: window.sessionStorage })]

B. plugins: [createPersistedState({ paths: ['user'], storage: 'sessionStorage' })]

C. plugins: [createPersistedState({ keys: ['user'], storage: sessionStorage })]

D. plugins: [createPersistedState({ paths: ['user'], storage: window.sessionStorage })]

Solution

1. Step 1: Use the correct option to select parts of state

   The paths option specifies which parts of the state to save, so paths: ['user'] is correct.

2. Step 2: Set storage to sessionStorage correctly

   The storage option expects the storage object, so window.sessionStorage is correct.

3. Final Answer:

   plugins: [createPersistedState({ paths: ['user'], storage: window.sessionStorage })] -> Option D

4. Quick Check:

   Use paths and window.sessionStorage for selective session storage [OK]

Hint: Use paths array and window.sessionStorage for selective session saving [OK]

Common Mistakes:

• Using string 'sessionStorage' instead of window.sessionStorage object
• Using wrong option names like only or keys
• Not specifying paths to limit saved state