Why state management is needed in Vue - See It in Action

Why State Management is Needed in Vue

📖 Scenario: You are building a simple Vue app that shows a list of tasks and a counter of how many tasks are done. You want to keep track of the tasks and their done status in one place so all parts of the app can see the same data.

🎯 Goal: Build a small Vue app that uses a shared state object to hold tasks and their done status. Show the tasks and a count of done tasks. This will demonstrate why state management is needed to keep data consistent across components.

📋 What You'll Learn

Create a reactive state object with a list of tasks and their done status

Create a computed property to count how many tasks are done

Display the list of tasks with checkboxes to toggle done status

Display the count of done tasks updating automatically

💡 Why This Matters

🌍 Real World

Many apps need to keep data consistent across different parts of the interface. State management helps by storing data in one place and letting all components react to changes.

💼 Career

Understanding state management is key for frontend developers working with Vue or other frameworks. It helps build apps that are easier to maintain and less buggy.

1

Set up the tasks state

Create a reactive state object called state with a property tasks that is an array of three objects. Each object should have id, title, and done properties. Use these exact tasks: {id: 1, title: 'Buy groceries', done: false}, {id: 2, title: 'Wash car', done: true}, {id: 3, title: 'Read book', done: false}.

Vue

import { reactive } from 'vue'

// Create reactive state object with tasks array
// Your code here




  

Hint

Use reactive from Vue to create a state object with a tasks array containing the exact task objects.

2

Add a computed property for done count

Import computed from 'vue' and create a computed property called doneCount that returns the number of tasks in state.tasks where done is true.

Vue

import { reactive, computed } from 'vue'

const state = reactive({
  tasks: [
    { id: 1, title: 'Buy groceries', done: false },
    { id: 2, title: 'Wash car', done: true },
    { id: 3, title: 'Read book', done: false }
  ]
})

// Create computed property doneCount
// Your code here




  

Hint

Use computed to create doneCount that filters state.tasks for tasks where done is true and returns the count.

3

Display tasks with checkboxes

In the <template>, use a v-for directive to loop over state.tasks with task as the item and task.id as the key. For each task, show a checkbox bound with v-model to task.done and a label showing task.title.

Vue

import { reactive, computed } from 'vue'

const state = reactive({
  tasks: [
    { id: 1, title: 'Buy groceries', done: false },
    { id: 2, title: 'Wash car', done: true },
    { id: 3, title: 'Read book', done: false }
  ]
})

const doneCount = computed(() => state.tasks.filter(task => task.done).length)



  
  

Hint

Use v-for to loop over state.tasks. Bind checkbox with v-model to task.done. Use label with :for attribute for accessibility.

4

Show count of done tasks

Below the task list in the <template>, add a paragraph that shows the text Done tasks: followed by the value of the computed property doneCount.

Vue

import { reactive, computed } from 'vue'

const state = reactive({
  tasks: [
    { id: 1, title: 'Buy groceries', done: false },
    { id: 2, title: 'Wash car', done: true },
    { id: 3, title: 'Read book', done: false }
  ]
})

const doneCount = computed(() => state.tasks.filter(task => task.done).length)



  
    
      
      {{ task.title }}
    
  
  
  

Hint

Use a paragraph tag to show the text and bind the computed property doneCount inside curly braces.

Practice

1. Why do Vue applications need state management?
State refers to the data that changes over time in your app.

easy

A. To keep data consistent and share it easily between components

B. To make the app load faster by caching data

C. To add more styles to the components

D. To reduce the size of the app bundle

Solution

1. Step 1: Understand what state means in Vue

   State is the data that can change and affect the app's display or behavior.

2. Step 2: Identify why managing state is important

   Managing state helps keep data consistent and allows different parts of the app to share and update data easily.

3. Final Answer:

   To keep data consistent and share it easily between components -> Option A

4. Quick Check:

   State management = data consistency and sharing [OK]

Hint: State management = sharing and syncing data [OK]

Common Mistakes:

• Confusing state management with styling or performance
• Thinking state management only speeds up loading
• Believing state management reduces app size

2. Which of the following is the correct way to declare a reactive state variable in Vue 3 Composition API?

easy

A. const count = reactive(0);

B. const count = state(0);

C. const count = ref(0);

D. const count = ref({ value: 0 });

Solution

1. Step 1: Recall Vue 3 reactive tools

   Vue 3 uses ref to create reactive primitive values like numbers.

2. Step 2: Check each option

   const count = reactive(0); uses reactive on a primitive, which is incorrect. const count = state(0); uses a non-existent state function. const count = ref(0); correctly uses ref(0). const count = ref({ value: 0 }); creates a ref containing a plain object whose inner properties are not reactive.

3. Final Answer:

   const count = ref(0); -> Option C

4. Quick Check:

   Use ref() for reactive primitives [OK]

Hint: Use ref() for single reactive values [OK]

Common Mistakes:

• Using reactive() for primitive values
• Trying to use a non-existent state() function
• Wrapping primitives unnecessarily in objects

3. Consider this Vue 3 code snippet:

const state = reactive({ count: 0 });
function increment() {
  state.count++;
}
increment();
console.log(state.count);

What will be logged to the console?

medium

A. Error

B. 0

C. undefined

D. 1

Solution

1. Step 1: Understand reactive state and mutation

   The state object is reactive with a count property starting at 0. The increment function increases count by 1.

2. Step 2: Trace the code execution

   Calling increment() increases state.count from 0 to 1. Then console.log(state.count) outputs 1.

3. Final Answer:

   1 -> Option D

4. Quick Check:

   Reactive state updates count to 1 [OK]

Hint: Increment changes reactive count from 0 to 1 [OK]

Common Mistakes:

• Thinking reactive objects don't update
• Confusing reactive with ref syntax
• Expecting no output or error

4. This Vue 3 code tries to share state between components:

const state = reactive({ count: 0 });
function increment() {
  state.count += 1;
}
export default { setup() { return { state, increment }; } }

But the count does not update in the UI when increment is called. What is the likely problem?

medium

A. The component does not use state.count in its template

B. The state object is not reactive

C. The increment function does not change state

D. Reactive state cannot be shared between components

Solution

1. Step 1: Check if state is reactive and updated

   The state is reactive and increment correctly updates state.count.

2. Step 2: Identify why UI doesn't update

   If the UI does not use state.count in its template, Vue won't know to update the display when it changes.

3. Final Answer:

   The component does not use state.count in its template -> Option A

4. Quick Check:

   Template must use reactive state to update UI [OK]

Hint: Template must display reactive state to see updates [OK]

Common Mistakes:

• Assuming reactive state alone updates UI
• Thinking increment does not change state
• Believing reactive state can't be shared

5. You have two sibling components in Vue 3 that need to share a counter value and update it. Which approach best uses state management to keep their data in sync?

hard

A. Each component has its own local ref counter and updates independently

B. Use a shared reactive object in a separate module imported by both components

C. Pass the counter value as a prop from one sibling to the other

D. Use v-if to toggle visibility and reset counters

Solution

1. Step 1: Understand sibling component communication

   Siblings cannot directly pass props to each other; they need a shared source for state.

2. Step 2: Evaluate options for shared state

   Using a shared reactive object in a separate module imported by both components allows both components to read and update the same state, keeping data in sync.

3. Final Answer:

   Use a shared reactive object in a separate module imported by both components -> Option B

4. Quick Check:

   Shared reactive state module syncs sibling data [OK]

Hint: Use shared reactive module for sibling state sync [OK]

Common Mistakes:

• Using local state only, causing desync
• Trying to pass props directly between siblings
• Using v-if to reset state instead of sharing