Persisting store state in Vue - Step-by-Step Execution

Concept Flow - Persisting store state

App starts

↓

Load store state from storage?

No→Use default state

Yes↓

Initialize store with loaded state

↓

User interacts -> store state changes

↓

Save updated state to storage

↩Back to User interacts

When the app starts, it tries to load saved state from storage. If found, it initializes the store with it. When the user changes state, the new state is saved back to storage.

Execution Sample

Vue

import { reactive, watch } from 'vue'
const store = reactive({ count: 0 })
const saved = localStorage.getItem('store')
if (saved) store.count = JSON.parse(saved).count
watch(store, () => localStorage.setItem('store', JSON.stringify(store)))

This code loads a saved count from localStorage into a reactive store and saves changes back automatically.

Execution Table

Step	Action	Store State Before	Operation	Store State After	Storage Interaction
1	App starts	{ count: 0 }	Check localStorage	{ count: 0 }	localStorage.getItem('store') returns '{"count":5}'
2	Load saved state	{ count: 0 }	Parse and assign	{ count: 5 }	No change
3	User clicks increment	{ count: 5 }	store.count++	{ count: 6 }	No change yet
4	Watch triggers	{ count: 6 }	Save to localStorage	{ count: 6 }	localStorage.setItem('store', '{"count":6}')
5	User clicks increment again	{ count: 6 }	store.count++	{ count: 7 }	No change yet
6	Watch triggers	{ count: 7 }	Save to localStorage	{ count: 7 }	localStorage.setItem('store', '{"count":7}')
7	App reloads	{ count: 0 }	Check localStorage	{ count: 0 }	localStorage.getItem('store') returns '{"count":7}'
8	Load saved state	{ count: 0 }	Parse and assign	{ count: 7 }	No change
9	Exit	{ count: 7 }	No more actions	{ count: 7 }	State persisted

💡 Execution stops because no more user actions occur and state is persisted.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 6	After Step 8	Final
store.count	0	5	6	7	7	7
localStorage 'store'	{"count":5}	{"count":5}	{"count":6}	{"count":7}	{"count":7}	{"count":7}

Key Moments - 3 Insights

Why does the store state update after loading from localStorage?

Because at step 2, the saved JSON string is parsed and assigned to the reactive store, updating store.count from 0 to 5 as shown in the execution_table.

When does the localStorage get updated with the new store state?

At steps 4 and 6, the watch function triggers after store.count changes, saving the updated state to localStorage as shown in the Storage Interaction column.

What happens if localStorage is empty when the app starts?

At step 1, localStorage.getItem returns null, so the store keeps its default state (count: 0) as shown in the execution_table row 1.

Visual Quiz - 3 Questions

Look at the execution table, what is store.count after step 4?

A 6

B 5

C 7

D 0

💡 Hint

Check the 'Store State After' column at step 4 in the execution_table.

At which step does localStorage first get updated with the new store state?

A Step 6

B Step 2

C Step 4

D Step 8

💡 Hint

Look at the 'Storage Interaction' column to see when localStorage.setItem is first called.

If localStorage was empty at app start, what would store.count be after step 2?

A null

B 0

C 5

D undefined

💡 Hint

Refer to the 'Store State After' column at step 2 and the explanation in key_moments about empty localStorage.

Concept Snapshot

Persisting store state in Vue:
- On app start, load saved state from localStorage if exists.
- Initialize reactive store with loaded or default state.
- Use watch to save store changes back to localStorage.
- This keeps state across page reloads.
- localStorage stores strings, so use JSON.stringify/parse.

Full Transcript

This visual execution shows how a Vue reactive store can keep its state saved in localStorage. When the app starts, it checks localStorage for saved data. If found, it loads and parses it to update the store's state. When the user changes the store (like incrementing a count), a watch function triggers and saves the new state back to localStorage as a JSON string. This way, the state persists even if the page reloads. The execution table traces each step, showing store values and storage interactions. The variable tracker highlights how store.count and localStorage content change over time. Key moments clarify common confusions like when loading and saving happen. The quiz tests understanding by asking about specific steps and values. This method helps beginners see exactly how persisting store state works in Vue with localStorage.

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