Persisting store state in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Vuex persist state with plugins?

Consider a Vuex store using a plugin to save state to localStorage. What happens when the page reloads?

Vue

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) { state.count++ }
  },
  plugins: [store => {
    store.subscribe((mutation, state) => {
      localStorage.setItem('count', state.count)
    })
  }]
})

A The count resets to 0 on reload because state is not restored automatically.

B The count value doubles on each reload because the plugin runs twice.

C The count value is saved but causes an error on reload due to missing initialization.

D The count value is restored from localStorage automatically on reload.

💡 Hint

Think about what the plugin does and what it does not do on page load.

The plugin saves the state to localStorage on mutation, but it does not restore the state when the store initializes. So on reload, the count resets to 0.

📝 Syntax

intermediate

Which code correctly initializes Vuex state from localStorage?

You want to initialize the Vuex store state with a saved count from localStorage or default to 0. Which option is correct?

A state: { count: parseInt(localStorage.getItem('count')) || 0 }

B state: { count: Number(localStorage.getItem('count')) || 0 }

C state: { count: localStorage.getItem('count') || 0 }

D state: { count: JSON.parse(localStorage.getItem('count')) || 0 }

💡 Hint

Remember localStorage stores strings. You need a number for count.

parseInt converts the string to a number or returns NaN, which is falsy, so the || 0 fallback works correctly.

🔧 Debug

advanced

Why does the persisted state not update after mutation?

Given this Vuex plugin code, why does localStorage not update after calling a mutation?

Vue

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) { state.count++ }
  },
  plugins: [store => {
    store.subscribe((mutation, state) => {
      localStorage.setItem('count', state.count)
    })
  }]
})

store.commit('increment')
// localStorage.getItem('count') still returns '0'

A The plugin subscribes after the mutation, so it misses the update.

B The mutation updates state.count, but localStorage stores the old value because subscribe callback runs before mutation.

C The mutation changes state.count but localStorage.setItem is not called due to a typo.

D The mutation is asynchronous, so localStorage updates before state changes.

💡 Hint

Consider when the subscribe callback runs relative to mutation.

Vuex subscribe callbacks run after mutations, so the state.count should be updated. However, if the mutation is synchronous, localStorage should update. The issue is likely a misunderstanding: the code works as expected, so the problem is elsewhere.

❓ state_output

advanced

What is the value of state after reload with persisted state plugin?

Using this Vuex store with persisted state plugin, what is the value of state.count after a page reload?

Vue

const persistedState = store => {
  const saved = localStorage.getItem('count')
  if (saved) {
    store.replaceState({ count: Number(saved) })
  }
  store.subscribe((mutation, state) => {
    localStorage.setItem('count', state.count)
  })
}

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) { state.count++ }
  },
  plugins: [persistedState]
})

store.commit('increment')
// page reload happens here

A NaN

B 0

C undefined

D 1

💡 Hint

Look at how replaceState uses the saved value on initialization.

The plugin reads the saved count from localStorage and replaces the store state with it on initialization. After committing increment once, count is 1 and saved. On reload, replaceState sets count to 1.

🧠 Conceptual

expert

Why use Vuex replaceState for persisting state?

Why is store.replaceState() preferred over directly mutating store.state when restoring persisted state?

A replaceState automatically saves the state to localStorage, direct mutation does not.

B Direct mutation of store.state is forbidden and causes runtime errors, replaceState avoids errors.

C replaceState triggers Vuex reactivity and updates all subscribers properly, while direct mutation does not.

D replaceState is faster because it skips Vuex mutation handlers, while direct mutation is slow.

💡 Hint

Think about Vuex reactivity and how state changes notify components.

replaceState replaces the entire state and triggers Vuex's reactivity system, ensuring components update. Directly mutating store.state bypasses Vuex's tracking and can cause inconsistent UI.