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.

Practice

1. What is the main purpose of creating a Pinia store in a Vue application?

easy

A. To handle routing between pages

B. To style components with CSS

C. To hold and manage shared state across components

D. To write HTML templates

Solution

1. Step 1: Understand what Pinia stores do

   Pinia stores are designed to hold shared data (state) that multiple components can access and update.

2. Step 2: Identify the correct purpose

   Styling, routing, and HTML templates are handled by other parts of Vue or related libraries, not Pinia stores.

3. Final Answer:

   To hold and manage shared state across components -> Option C

4. Quick Check:

   Pinia stores = shared state management [OK]

Hint: Pinia stores manage shared data, not styles or routes [OK]

Common Mistakes:

• Confusing Pinia with CSS or routing libraries
• Thinking Pinia handles templates
• Assuming Pinia is for styling

2. Which of the following is the correct way to define a Pinia store named 'user' using defineStore?

easy

A. const userStore = createStore('user', { state: () => ({ name: '' }) })

B. const userStore = defineStore('user', { data: () => ({ name: '' }) })

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

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

Solution

1. Step 1: Recall the correct syntax for defineStore

   The correct syntax is defineStore('storeId', { state: () => ({ ... }) }) and assign it to a function named useStoreId.

2. Step 2: Check each option

   const useUserStore = defineStore('user', { state: () => ({ name: '' }) }) uses defineStore with correct parameters and naming. const userStore = createStore('user', { state: () => ({ name: '' }) }) uses createStore which is incorrect. const useUserStore = defineStore({ name: 'user', state: () => ({ name: '' }) }) passes an object without storeId string first. const userStore = defineStore('user', { data: () => ({ name: '' }) }) uses 'data' instead of 'state'.

3. Final Answer:

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

4. Quick Check:

   defineStore('id', { state }) syntax = const useUserStore = defineStore('user', { state: () => ({ name: '' }) }) [OK]

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

Common Mistakes:

• Using createStore instead of defineStore
• Passing object without store id string
• Using 'data' instead of 'state' key

3. Given this Pinia store definition:

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

What will be the value of count after calling increment() twice?

medium

A. 0

B. 2

C. undefined

D. 1

Solution

1. Step 1: Understand initial state and action

   The initial count is 0. The increment action increases count by 1 each time it is called.

2. Step 2: Calculate count after two increments

   Calling increment() twice adds 1 + 1 to count, so count becomes 2.

3. Final Answer:

   2 -> Option B

4. Quick Check:

   0 + 1 + 1 = 2 [OK]

Hint: Each increment adds 1; two calls add 2 total [OK]

Common Mistakes:

• Forgetting to call increment twice
• Assuming count resets each call
• Confusing initial value with updated value

4. Identify the error in this Pinia store code:

const useTodoStore = defineStore('todo', {
  state: () => ({ todos: [] }),
  actions: {
    addTodo(todo) {
      this.todos.push(todo)
    }
  }
})

// Usage
const todoStore = useTodoStore()
todoStore.addTodo('Learn Pinia')

medium

A. Missing import of defineStore from 'pinia'

B. State should be an object, not a function

C. Actions cannot modify state directly

D. Store id must be an object, not a string

Solution

1. Step 1: Check the store definition syntax

   The store is correctly defined with state as a function returning an object, and actions modifying state properly.

2. Step 2: Identify missing parts

   The code snippet does not show importing defineStore from 'pinia', which is required to use defineStore.

3. Final Answer:

   Missing import of defineStore from 'pinia' -> Option A

4. Quick Check:

   Always import defineStore before use [OK]

Hint: Always import defineStore from 'pinia' before defining stores [OK]

Common Mistakes:

• Forgetting to import defineStore
• Thinking state must be an object, not a function
• Believing actions cannot modify state

5. You want to create a Pinia store that keeps track of a user's profile with a name and age, and includes a getter to check if the user is an adult (age >= 18). Which of the following is the correct way to define this store?

hard

A. const useUserStore = defineStore('user', {
state: () => ({ name: '', age: 0 }),
getters: {
isAdult() { return this.age >= 18 }
}
})

B. const useUserStore = defineStore('user', {
state: { name: '', age: 0 },
getters: {
isAdult() { return this.age >= 18 }
}
})

C. const useUserStore = defineStore('user', {
state: { name: '', age: 0 },
getters: {
isAdult: (state) => state.age >= 18
}
})

D. const useUserStore = defineStore('user', {
state: () => ({ name: '', age: 0 }),
actions: {
isAdult() { return this.age >= 18 }
}
})

Solution

1. Step 1: Check state definition

   State must be a function returning an object. Options C and D do this correctly; A and B do not.

2. Step 2: Check getter syntax

   Getters can be defined as functions using 'this' to access state. const useUserStore = defineStore('user', { state: () => ({ name: '', age: 0 }), getters: { isAdult() { return this.age >= 18 } } }) uses this correctly. const useUserStore = defineStore('user', { state: { name: '', age: 0 }, getters: { isAdult: (state) => state.age >= 18 } }) has incorrect state. const useUserStore = defineStore('user', { state: { name: '', age: 0 }, getters: { isAdult() { return this.age >= 18 } } }) has incorrect state. const useUserStore = defineStore('user', { state: () => ({ name: '', age: 0 }), actions: { isAdult() { return this.age >= 18 } } }) puts isAdult in actions, which is wrong because isAdult is a computed property, not an action.

3. Final Answer:

   const useUserStore = defineStore('user', { state: () => ({ name: '', age: 0 }), getters: { isAdult() { return this.age >= 18 } } }) -> Option A

4. Quick Check:

   State as function + getter with this = const useUserStore = defineStore('user', { state: () => ({ name: '', age: 0 }), getters: { isAdult() { return this.age >= 18 } } }) [OK]

Hint: State is function; getters use this for reactive access [OK]

Common Mistakes:

• Defining state as object instead of function
• Putting computed logic inside actions
• Using arrow function getters with state parameter incorrectly