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.