Defining state in stores in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does the state update in a Vue store?

Consider a Vue store defined with reactive state. What happens when you update a property inside the state object?

Vue

import { reactive } from 'vue';

const store = {
  state: reactive({ count: 0 })
};

function increment() {
  store.state.count++;
}

increment();
console.log(store.state.count);

A The state count throws an error because reactive cannot be used in stores.

B The state count updates to 1 and any component using it re-renders.

C The state count updates to 1 but components do not re-render automatically.

D The state count remains 0 because reactive objects are immutable.

💡 Hint

Think about how Vue's reactive function tracks changes.

Vue's reactive creates a reactive object. When you change a property like count, Vue tracks it and updates any component using that state.

📝 Syntax

intermediate

Identify the correct way to define state in a Vue store

Which of the following correctly defines a reactive state object inside a Vue store?

A const state = reactive user: null };

B const state = ref({ user: null });

C const state = reactive([{ user: null }]);

D const state = reactive({ user: null });

💡 Hint

Remember the syntax for reactive requires an object inside parentheses.

Option D correctly uses reactive with an object. Option D uses ref which wraps a single value, not an object. Option D has syntax errors. Option D uses an array which is not typical for state objects.

🔧 Debug

advanced

Why does this Vue store state not update the component?

Given this store code, why does the component not update when state.count changes?

Vue

import { reactive } from 'vue';

const state = { count: 0 };

function increment() {
  state.count++;
}

export default { state, increment };

A Because the increment function is not called inside a Vue lifecycle hook.

B Because <code>count</code> is a number and numbers cannot be reactive.

C Because <code>state</code> is not reactive; it should be wrapped with <code>reactive()</code>.

D Because the store must use <code>ref</code> instead of <code>reactive</code>.

💡 Hint

Check how the state object is created and if Vue can track its changes.

The state object is a plain JavaScript object, not reactive. Vue cannot detect changes unless wrapped with reactive(). Option C is incorrect because numbers inside reactive objects are tracked. Option C is irrelevant. Option C is incorrect because reactive is appropriate for objects.

❓ state_output

advanced

What is the value of state after these mutations?

Given this Vue store code, what is the final value of state.items?

Vue

import { reactive } from 'vue';

const state = reactive({ items: [] });

function addItem(item) {
  state.items.push(item);
}

addItem('apple');
addItem('banana');
state.items = ['orange'];

A ['orange']

B ['apple', 'banana']

C ['apple', 'banana', 'orange']

D []

💡 Hint

Consider what happens when you assign a new array to a reactive property.

Initially, items array has 'apple' and 'banana'. Then it is replaced by a new array ['orange']. So the final value is ['orange'].

🧠 Conceptual

expert

Why use a function to define state in Vue stores?

In Vue 3 stores, why is it recommended to define the state as a function returning an object instead of a plain object?

A To ensure each store instance has its own independent reactive state, avoiding shared state bugs.

B Because Vue requires all state to be functions for reactivity to work.

C To improve performance by caching the state object across components.

D Because functions automatically make the state deeply reactive.

💡 Hint

Think about what happens if multiple components use the same store instance.

Defining state as a function returning an object ensures each instance gets a fresh copy of the state. This prevents components from sharing and mutating the same state object, which can cause bugs. Vue does not require state to be functions, and functions do not automatically make state reactive or improve performance by caching.