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 {}.

Practice

1. What is the correct way to define the state in a Vue store using defineStore?

easy

A. Define state as an array of values.

B. Define state as a plain object directly.

C. Define state as a function that returns an object.

D. Define state as a string representing JSON.

Solution

1. Step 1: Understand Vue store state definition

   Vue stores require state to be a function returning an object to avoid shared state across instances.

2. Step 2: Compare options with Vue pattern

   Only defining state as a function returning an object matches Vue's recommended pattern.

3. Final Answer:

   Define state as a function that returns an object. -> Option C

4. Quick Check:

   State = function returning object [OK]

Hint: State must be a function returning an object in Vue stores [OK]

Common Mistakes:

• Defining state as a plain object causes shared state bugs
• Using arrays or strings instead of objects for state
• Forgetting to return the object from the state function

2. Which of the following is the correct syntax to define a store named 'user' with a state containing a 'name' property initialized to an empty string?

easy

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

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

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

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

Solution

1. Step 1: Recall defineStore syntax

   The first argument is the store id string, the second is an object with a state function returning the state object.

2. Step 2: Check each option

   const useUserStore = defineStore('user', { state: () => ({ name: '' }) }) correctly uses defineStore with id 'user' and state as a function returning { name: '' }.

3. Final Answer:

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

4. Quick Check:

   defineStore(id, { state: () => ({}) }) [OK]

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

Common Mistakes:

• Defining state as an object instead of a function
• Passing state function as the second argument directly
• Using an object with 'id' property instead of string id

3. Given the following store definition, what will be the initial value of store.count after calling const store = useCounterStore()?

const useCounterStore = defineStore('counter', {
  state: () => ({ count: 10 })
})

medium

A. 10

B. 0

C. null

D. undefined

Solution

1. Step 1: Analyze the state function

   The state function returns an object with count initialized to 10.

2. Step 2: Understand store instance value

   When useCounterStore() is called, it creates a store instance with count set to 10 as initial state.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   Initial count = 10 [OK]

Hint: State function returns initial values used in store instance [OK]

Common Mistakes:

• Assuming count defaults to 0 if not explicitly set
• Confusing state function with plain object
• Expecting undefined because of missing initialization

4. Identify the error in this store definition:

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

medium

A. The todos array should be initialized outside the state.

B. State must be a function returning an object, not an object directly.

C. The store id 'todo' must be an object, not a string.

D. The defineStore function requires no arguments.

Solution

1. Step 1: Check state definition format

   State must be a function returning an object to avoid shared state across instances.

2. Step 2: Identify the error

   The code defines state as an object directly, which is incorrect.

3. Final Answer:

   State must be a function returning an object, not an object directly. -> Option B

4. Quick Check:

   State = function returning object, not plain object [OK]

Hint: State must always be a function returning an object [OK]

Common Mistakes:

• Defining state as a plain object causes shared state bugs
• Misunderstanding store id type requirements
• Incorrect usage of defineStore arguments

5. You want to create a store that holds a list of users and a method to add a new user. Which is the correct way to define the state and actions in defineStore?

hard

A. defineStore('users', { state: () => ({ users: [] }), actions: { addUser(user) { this.users.push(user) } } })

B. defineStore('users', { state: { users: [] }, methods: { addUser(user) { this.users.push(user) } } })

C. defineStore('users', () => ({ users: [], addUser(user) { this.users.push(user) } }))

D. defineStore('users', { state: () => ({ users: [] }), addUser(user) { this.users.push(user) } })

Solution

1. Step 1: Define state as a function returning an object

   The state must be a function returning an object with users array.

2. Step 2: Define actions inside the actions property

   Actions are methods inside the actions object to modify state safely.

3. Step 3: Verify correct syntax

   defineStore('users', { state: () => ({ users: [] }), actions: { addUser(user) { this.users.push(user) } } }) correctly defines state as a function and actions as an object with addUser method.

4. Final Answer:

   defineStore('users', { state: () => ({ users: [] }), actions: { addUser(user) { this.users.push(user) } } }) -> Option A

5. Quick Check:

   State function + actions object = correct store [OK]

Hint: Put actions inside 'actions' object, state as function [OK]

Common Mistakes:

• Defining state as an object instead of a function
• Placing methods outside the actions property
• Using 'methods' instead of 'actions' in defineStore