Creating a Pinia store in Vue - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the initial state of this Pinia store?

Given the Pinia store below, what is the value of count when the store is first used in a component?

Vue

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 10
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

A undefined

B NaN

C 0

D 10

💡 Hint

Look at the state function's returned object.

The state function returns an object with count set to 10, so the initial value is 10.

📝 Syntax

intermediate

Which option correctly defines a Pinia store with a getter?

Select the option that correctly defines a Pinia store with a getter named doubleCount that returns count * 2.

A

export const useStore = defineStore('main', {
  state: () => ({ count: 1 }),
  getters: {
    doubleCount: (state) => state.count * 2
  }
})

B

export const useStore = defineStore('main', {
  state: () => ({ count: 1 }),
  getters: {
    doubleCount() {
      return this.count * 2
    }
  }
})

C

export const useStore = defineStore('main', {
  state: () => ({ count: 1 }),
  getters: {
    doubleCount: () => this.count * 2
  }
})

D

export const useStore = defineStore('main', {
  state: () => ({ count: 1 }),
  getters: {
    doubleCount: function(state) {
      return state.count * 2
    }
  }
})

💡 Hint

Pinia getters receive state as the first argument and should not use this.

In Pinia, getters receive the state as the first argument and should be arrow functions or functions using the state parameter. Using this inside getters is not recommended.

🔧 Debug

advanced

Why does this Pinia store action not update the state?

Consider this Pinia store code. Why does calling increment() not change count?

Vue

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      let count = this.count
      count++
    }
  }
})

A The store is missing a mutation to update the state.

B The action increments a local variable instead of the store state property.

C The state is immutable and cannot be changed inside actions.

D The <code>this</code> keyword is not bound correctly in the action.

💡 Hint

Look at what variable is being incremented inside the action.

The action creates a local variable count and increments it, but does not update this.count. The state remains unchanged.

❓ state_output

advanced

What is the value of fullName after calling setName('Alice', 'Smith')?

Given this Pinia store, what is the value of fullName after calling the action setName('Alice', 'Smith')?

Vue

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    firstName: '',
    lastName: ''
  }),
  getters: {
    fullName: (state) => `${state.firstName} ${state.lastName}`
  },
  actions: {
    setName(first, last) {
      this.firstName = first
      this.lastName = last
    }
  }
})

// Usage:
const userStore = useUserStore()
userStore.setName('Alice', 'Smith')
const result = userStore.fullName

A " "

B "Alice"

C "Alice Smith"

D "Smith"

💡 Hint

Check how the getter combines firstName and lastName.

The action sets firstName and lastName, and the getter returns them joined with a space.

🧠 Conceptual

expert

Why use defineStore with an ID string in Pinia?

What is the main reason Pinia requires an ID string when creating a store with defineStore?

A To uniquely identify the store for devtools and state persistence.

B To set the initial state of the store automatically.

C To bind the store to a specific Vue component instance.

D To enable TypeScript type inference for the store.

💡 Hint

Think about how Pinia tracks and manages multiple stores.

The ID string uniquely identifies the store instance for debugging tools and plugins like persistence.