Type-safe stores with Pinia in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Pinia store state access?

Given the following Pinia store, what will be logged when console.log(store.user.name) runs?

Vue

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    user: {
      name: 'Alice',
      age: 30
    }
  })
})

const store = useUserStore()
console.log(store.user.name)

A TypeError: Cannot read property 'name' of undefined

B "user"

C undefined

D "Alice"

💡 Hint

Look at how the state is defined and accessed through the store instance.

The store's state has a user object with a name property set to "Alice". Accessing store.user.name returns "Alice".

📝 Syntax

intermediate

Which option correctly defines a type-safe Pinia store state?

Choose the option that correctly defines a Pinia store with TypeScript types for state.

Vue

import { defineStore } from 'pinia'

interface Todo {
  id: number
  title: string
  done: boolean
}

export const useTodoStore = defineStore('todo', {
  state: () => ({
    todos: [] as Todo[]
  })
})

A state: () => ({ todos: [] as Todo[] })

B state: () => ({ todos: [] }) as Todo[]

C state: () => <Todo[]>[]

D state: (): Todo[] => []

💡 Hint

Check how the array is typed inside the state function.

Option A correctly uses a type assertion inside the returned object to type todos as Todo[]. Other options either misplace the type or cause syntax errors.

🔧 Debug

advanced

Why does this Pinia store cause a runtime error?

Identify the cause of the runtime error in this Pinia store code.

Vue

import { defineStore } from 'pinia'

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

const store = useCounterStore()
store.increment()
console.log(store.count)

A SyntaxError: Unexpected token in actions

B TypeError: Cannot read property 'count' of undefined

C No error; output is 1

D ReferenceError: useCounterStore is not defined

💡 Hint

Check how actions access state properties using 'this'.

The code correctly defines an action that increments count using this.count++. Calling increment() updates the state, so logging store.count outputs 1.

❓ state_output

advanced

What is the value of store.fullName after calling store.setName('Bob', 'Smith')?

Consider this Pinia store with getters and actions. What will store.fullName be after calling store.setName('Bob', 'Smith')?

Vue

import { defineStore } from 'pinia'

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

const store = useProfileStore()
store.setName('Bob', 'Smith')

A "Smith Bob"

B "Bob Smith"

C "Bob"

D ""

💡 Hint

Look at how the getter combines state properties.

The getter fullName returns the concatenation of firstName and lastName separated by a space. After calling setName('Bob', 'Smith'), the state updates accordingly, so fullName is "Bob Smith".

🧠 Conceptual

expert

Which option best explains how Pinia ensures type safety in stores?

Select the explanation that correctly describes how Pinia achieves type safety when using TypeScript.

A Pinia uses TypeScript generics and infers types from the state, getters, and actions to provide full type safety and autocompletion.

B Pinia requires manual type annotations on every property to enforce type safety, otherwise it defaults to any type.

C Pinia disables type checking inside stores to improve performance and relies on runtime checks instead.

D Pinia only supports type safety for state but not for getters or actions.

💡 Hint

Think about how TypeScript works with Pinia's store definitions.

Pinia leverages TypeScript's powerful type inference and generics to automatically infer types from the store's state, getters, and actions. This provides developers with type safety and autocompletion without needing excessive manual annotations.