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.

Practice

1. What is the correct way to define the state in a Vue store using defineStore?

easy

A. Define state as an array of values.

B. Define state as a plain object directly.

C. Define state as a function that returns an object.

D. Define state as a string representing JSON.

Solution

1. Step 1: Understand Vue store state definition

   Vue stores require state to be a function returning an object to avoid shared state across instances.

2. Step 2: Compare options with Vue pattern

   Only defining state as a function returning an object matches Vue's recommended pattern.

3. Final Answer:

   Define state as a function that returns an object. -> Option C

4. Quick Check:

   State = function returning object [OK]

Hint: State must be a function returning an object in Vue stores [OK]

Common Mistakes:

• Defining state as a plain object causes shared state bugs
• Using arrays or strings instead of objects for state
• Forgetting to return the object from the state function

2. Which of the following is the correct syntax to define a store named 'user' with a state containing a 'name' property initialized to an empty string?

easy

A. const useUserStore = defineStore({ id: 'user', state: () => ({ name: '' }) })

B. const useUserStore = defineStore('user', { state: { name: '' } })

C. const useUserStore = defineStore('user', () => ({ name: '' }))

D. const useUserStore = defineStore('user', { state: () => ({ name: '' }) })

Solution

1. Step 1: Recall defineStore syntax

   The first argument is the store id string, the second is an object with a state function returning the state object.

2. Step 2: Check each option

   const useUserStore = defineStore('user', { state: () => ({ name: '' }) }) correctly uses defineStore with id 'user' and state as a function returning { name: '' }.

3. Final Answer:

   const useUserStore = defineStore('user', { state: () => ({ name: '' }) }) -> Option D

4. Quick Check:

   defineStore(id, { state: () => ({}) }) [OK]

Hint: Use defineStore('id', { state: () => ({}) }) syntax [OK]

Common Mistakes:

• Defining state as an object instead of a function
• Passing state function as the second argument directly
• Using an object with 'id' property instead of string id

3. Given the following store definition, what will be the initial value of store.count after calling const store = useCounterStore()?

const useCounterStore = defineStore('counter', {
  state: () => ({ count: 10 })
})

medium

A. 10

B. 0

C. null

D. undefined

Solution

1. Step 1: Analyze the state function

   The state function returns an object with count initialized to 10.

2. Step 2: Understand store instance value

   When useCounterStore() is called, it creates a store instance with count set to 10 as initial state.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   Initial count = 10 [OK]

Hint: State function returns initial values used in store instance [OK]

Common Mistakes:

• Assuming count defaults to 0 if not explicitly set
• Confusing state function with plain object
• Expecting undefined because of missing initialization

4. Identify the error in this store definition:

const useTodoStore = defineStore('todo', {
  state: {
    todos: []
  }
})

medium

A. The todos array should be initialized outside the state.

B. State must be a function returning an object, not an object directly.

C. The store id 'todo' must be an object, not a string.

D. The defineStore function requires no arguments.

Solution

1. Step 1: Check state definition format

   State must be a function returning an object to avoid shared state across instances.

2. Step 2: Identify the error

   The code defines state as an object directly, which is incorrect.

3. Final Answer:

   State must be a function returning an object, not an object directly. -> Option B

4. Quick Check:

   State = function returning object, not plain object [OK]

Hint: State must always be a function returning an object [OK]

Common Mistakes:

• Defining state as a plain object causes shared state bugs
• Misunderstanding store id type requirements
• Incorrect usage of defineStore arguments

5. You want to create a store that holds a list of users and a method to add a new user. Which is the correct way to define the state and actions in defineStore?

hard

A. defineStore('users', { state: () => ({ users: [] }), actions: { addUser(user) { this.users.push(user) } } })

B. defineStore('users', { state: { users: [] }, methods: { addUser(user) { this.users.push(user) } } })

C. defineStore('users', () => ({ users: [], addUser(user) { this.users.push(user) } }))

D. defineStore('users', { state: () => ({ users: [] }), addUser(user) { this.users.push(user) } })

Solution

1. Step 1: Define state as a function returning an object

   The state must be a function returning an object with users array.

2. Step 2: Define actions inside the actions property

   Actions are methods inside the actions object to modify state safely.

3. Step 3: Verify correct syntax

   defineStore('users', { state: () => ({ users: [] }), actions: { addUser(user) { this.users.push(user) } } }) correctly defines state as a function and actions as an object with addUser method.

4. Final Answer:

   defineStore('users', { state: () => ({ users: [] }), actions: { addUser(user) { this.users.push(user) } } }) -> Option A

5. Quick Check:

   State function + actions object = correct store [OK]

Hint: Put actions inside 'actions' object, state as function [OK]

Common Mistakes:

• Defining state as an object instead of a function
• Placing methods outside the actions property
• Using 'methods' instead of 'actions' in defineStore