Defining state in stores in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a state property in a Pinia store.

Vue

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    [1]: ''
  })
})

Drag options to blanks, or click blank then click option'

Aname

Bgetters

Cactions

Dcomputed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'getters' or 'actions' inside the state object.

Forgetting to return an object from the state function.

The state function returns an object with properties representing the store's state. Here, name is a state property.

2fill in blank

medium

Complete the code to initialize a numeric state property in a Pinia store.

Vue

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: [1]
  })
})

Drag options to blanks, or click blank then click option'

A'zero'

Bnull

C0

D'0'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string '0' instead of the number 0.

Using null which means no value.

The count state property should be a number starting at zero, so use 0 without quotes.

3fill in blank

hard

Fix the error in the state definition by completing the code correctly.

Vue

import { defineStore } from 'pinia'

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

Drag options to blanks, or click blank then click option'

A[ todos: [] ]

B{ todos: [] }

Ctodos: []

Dfunction() { return { todos: [] } }

Attempts:

3 left

💡 Hint

Common Mistakes

Returning an array instead of an object.

Not wrapping the object in parentheses.

The state function must return an object. Using { todos: [] } inside parentheses is correct.

4fill in blank

hard

Fill both blanks to define a Pinia store state with a string and an array.

Vue

import { defineStore } from 'pinia'

export const useProfileStore = defineStore('profile', {
  state: () => ({
    username: [1],
    hobbies: [2]
  })
})

Drag options to blanks, or click blank then click option'

A''

B[]

C0

D{}

Attempts:

3 left

💡 Hint

Common Mistakes

Using numbers or objects instead of string or array.

Mixing up brackets and braces.

The username is an empty string '' and hobbies is an empty array [] as initial state values.

5fill in blank

hard

Fill all three blanks to define a Pinia store state with a boolean, a number, and an object.

Vue

import { defineStore } from 'pinia'

export const useSettingsStore = defineStore('settings', {
  state: () => ({
    darkMode: [1],
    fontSize: [2],
    preferences: [3]
  })
})

Drag options to blanks, or click blank then click option'

Atrue

B14

C{}

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using true instead of false for darkMode initial value.

Using quotes around numbers or booleans.

Using array brackets instead of object braces for preferences.

The initial state sets darkMode to false, fontSize to 14, and preferences to an empty object {}.