Getters for computed store values in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue 3 getter return?

Given the Vue 3 store with a getter that computes the total price, what is the output of store.totalPrice if store.items = [{ price: 10, qty: 2 }, { price: 5, qty: 3 }]?

Vue

import { reactive, computed } from 'vue';

const store = reactive({
  items: [],
  get totalPrice() {
    return this.items.reduce((sum, item) => sum + item.price * item.qty, 0);
  }
});

store.items = [{ price: 10, qty: 2 }, { price: 5, qty: 3 }];

console.log(store.totalPrice);

A 35

B 25

C SyntaxError

D undefined

💡 Hint

Think about how the getter calculates the sum of price times quantity for each item.

The getter totalPrice sums up price * qty for each item. For the given items, (10*2) + (5*3) = 20 + 15 = 35.

📝 Syntax

intermediate

Which option correctly defines a Vue 3 getter for a computed store value?

You want to add a getter completedCount to a Vue 3 reactive store that counts completed tasks. Which option is syntactically correct?

Vue

import { reactive } from 'vue';

const store = reactive({
  tasks: [
    { id: 1, done: true },
    { id: 2, done: false }
  ],
  // Define getter here
});

A completedCount: () => this.tasks.filter(t => t.done).length,

B function completedCount() { return this.tasks.filter(t => t.done).length; }

C completedCount() { return this.tasks.filter(t => t.done).length; }

D get completedCount() { return this.tasks.filter(t => t.done).length; }

💡 Hint

Vue reactive getters use the get keyword inside the object.

Only option D uses the correct getter syntax inside a reactive object. Others are invalid or lose this context.

❓ state_output

advanced

What is the output after updating the store items?

Consider this Vue 3 reactive store with a getter. After pushing a new item, what is the value of store.totalPrice?

Vue

import { reactive } from 'vue';

const store = reactive({
  items: [{ price: 7, qty: 1 }],
  get totalPrice() {
    return this.items.reduce((sum, item) => sum + item.price * item.qty, 0);
  }
});

store.items.push({ price: 3, qty: 4 });

console.log(store.totalPrice);

A 10

B 19

C 7

D Error: Cannot read property 'reduce' of undefined

💡 Hint

Remember the getter recalculates based on the current items array.

The items are [{7,1}, {3,4}]. Total is (7*1) + (3*4) = 7 + 12 = 19.

🔧 Debug

advanced

Why does this Vue 3 getter not update reactively?

This Vue 3 store has a getter, but the UI does not update when items change. What is the cause?

Vue

import { reactive, computed } from 'vue';

const store = reactive({
  items: [],
  totalPrice: computed(() => {
    return store.items.reduce((sum, item) => sum + item.price * item.qty, 0);
  })
});

store.items.push({ price: 5, qty: 2 });

A Using computed inside reactive object is incorrect; computed should be outside.

B Reactive objects cannot have getters.

C The getter should use 'this.items' instead of 'store.items'.

D The push method does not trigger reactivity.

💡 Hint

Check how the getter accesses the reactive property inside the object.

Inside the computed function, store.items is used, but store is not fully reactive there. Using this.items inside a getter or computed function ensures reactivity.

🧠 Conceptual

expert

How do Vue 3 getters differ from computed properties in stores?

Which statement best describes the difference between Vue 3 reactive getters and computed properties used in stores?

A Getters are defined as object properties with 'get' keyword and access reactive state via 'this'; computed properties are standalone functions that cache results.

B Getters and computed properties are identical and interchangeable in Vue 3 stores.

C Computed properties cannot access reactive state, but getters can.

D Getters automatically update UI, but computed properties do not.

💡 Hint

Think about syntax and how each accesses reactive data.

Getters use the get keyword inside reactive objects and access state via this. Computed properties are functions that cache their results and are often defined outside the reactive object.

Practice

1. What is the main purpose of getters in a Vue store?

easy

A. To compute and return derived state based on the store's data

B. To directly modify the store's state values

C. To register new components in the Vue app

D. To handle user input events in components

Solution

1. Step 1: Understand what getters do

   Getters compute values derived from the store's state without changing the state itself.

2. Step 2: Compare options with this role

   Only To compute and return derived state based on the store's data describes computing and returning derived state, which matches getters' purpose.

3. Final Answer:

   To compute and return derived state based on the store's data -> Option A

4. Quick Check:

   Getters compute derived state = B [OK]

Hint: Getters compute data, mutations change data [OK]

Common Mistakes:

• Confusing getters with mutations that modify state
• Thinking getters handle events or components
• Assuming getters register components

2. Which of the following is the correct syntax to define a getter named completedTasks in a Vue store?

easy

A. getters: { completedTasks: function() { return state.tasks.filter(t => t.done) } }

B. getters: { completedTasks: (state) => state.tasks.filter(t => t.done) }

C. getters: { completedTasks() { return this.tasks.filter(t => t.done) } }

D. getters: { completedTasks: (state) => { state.tasks.filter(t => t.done) } }

Solution

1. Step 1: Review correct getter syntax

   A getter is a function receiving state and returning a value. Arrow function with implicit return is common.

2. Step 2: Check each option

   getters: { completedTasks: (state) => state.tasks.filter(t => t.done) } correctly uses an arrow function with state parameter and returns filtered tasks. getters: { completedTasks() { return this.tasks.filter(t => t.done) } } incorrectly uses this which is not available. getters: { completedTasks: function() { return state.tasks.filter(t => t.done) } } lacks state parameter. getters: { completedTasks: (state) => { state.tasks.filter(t => t.done) } } misses return statement.

3. Final Answer:

   getters: { completedTasks: (state) => state.tasks.filter(t => t.done) } -> Option B

4. Quick Check:

   Getter syntax needs state param and return value = C [OK]

Hint: Getters get state as first param and return computed value [OK]

Common Mistakes:

• Using this inside getters instead of state
• Forgetting to return a value from the getter
• Not including state as a parameter

3. Given the Vue store state:

state: { items: [ { id: 1, done: true }, { id: 2, done: false } ] }

and getter:

getters: { doneCount: (state) => state.items.filter(i => i.done).length }

What will store.getters.doneCount return?

medium

A. 2

B. undefined

C. 1

D. 0

Solution

1. Step 1: Analyze the state array

   There are two items: one with done: true and one with done: false.

2. Step 2: Evaluate the getter logic

   The getter filters items where done is true, so only one item matches. Then it returns the length, which is 1.

3. Final Answer:

   1 -> Option C

4. Quick Check:

   Count of done items = 1 [OK]

Hint: Count items with done true using filter and length [OK]

Common Mistakes:

• Counting all items instead of filtered ones
• Returning the filtered array instead of its length
• Assuming undefined because of missing return

4. Identify the error in this Vue store getter definition:

getters: { activeUsers: (state) => { state.users.filter(u => u.active) } }

medium

A. Filter method cannot be used on arrays

B. Incorrect parameter name; should be 'context' instead of 'state'

C. Using arrow function is not allowed for getters

D. Missing return statement inside the getter function

Solution

1. Step 1: Check getter function body

   The getter uses curly braces but does not return the filtered array explicitly.

2. Step 2: Understand arrow function return rules

   When using curly braces in arrow functions, you must use return to output a value. Without it, the function returns undefined.

3. Final Answer:

   Missing return statement inside the getter function -> Option D

4. Quick Check:

   Arrow function with braces needs explicit return = A [OK]

Hint: Arrow functions with braces need explicit return [OK]

Common Mistakes:

• Assuming implicit return with curly braces
• Confusing parameter names for getters
• Thinking filter can't be used on arrays

5. You want a getter that returns the total price of items in a cart, but only for items with quantity > 0.
Given state:

state: { cart: [ { price: 10, quantity: 2 }, { price: 5 }, { price: 3, quantity: 4 } ] }

Which getter correctly computes this total?

hard

A. totalPrice: (state) => state.cart.filter(i => i.quantity > 0).reduce((sum, item) => sum + item.price * item.quantity, 0)

B. totalPrice: (state) => state.cart.reduce((sum, item) => sum + item.price * item.quantity, 0)

C. totalPrice: (state) => state.cart.map(i => i.price * i.quantity).reduce((a, b) => a + b)

D. totalPrice: (state) => state.cart.reduce((sum, item) => sum + item.price, 0)

Solution

1. Step 1: Understand the requirement

   Only items with quantity > 0 should be counted in total price calculation.

2. Step 2: Analyze each option

   totalPrice: (state) => state.cart.reduce((sum, item) => sum + item.price * item.quantity, 0) sums all items regardless of quantity. totalPrice: (state) => state.cart.filter(i => i.quantity > 0).reduce((sum, item) => sum + item.price * item.quantity, 0) filters items with quantity > 0 before summing, which is correct. totalPrice: (state) => state.cart.map(i => i.price * i.quantity).reduce((a, b) => a + b) sums all items including those with zero quantity. totalPrice: (state) => state.cart.reduce((sum, item) => sum + item.price, 0) sums only prices ignoring quantity.

3. Final Answer:

   totalPrice: (state) => state.cart.filter(i => i.quantity > 0).reduce((sum, item) => sum + item.price * item.quantity, 0) -> Option A

4. Quick Check:

   Filter then reduce for quantity > 0 total = A [OK]

Hint: Filter items with quantity > 0 before summing [OK]

Common Mistakes:

• Not filtering out items with zero quantity
• Summing prices without multiplying by quantity
• Using map without filtering first