Creating a Pinia store in Vue - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the function needed to create a Pinia store.

Vue

import { [1] } from 'pinia';

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

AdefineStore

BcreatePinia

CuseStore

DcreateStore

Attempts:

3 left

💡 Hint

Common Mistakes

Using createStore instead of defineStore

Trying to import useStore which is not a Pinia function

Importing createPinia which is for creating the Pinia instance

The defineStore function is used to create a Pinia store.

2fill in blank

medium

Complete the code to define a Pinia store named 'counter'.

Vue

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

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

Acounter

BcounterStore

CuseCounter

DstoreCounter

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase store id instead of simple string

Using the variable name instead of the store id string

Adding 'use' prefix in the store id string

The first argument to defineStore is the unique store id, here 'counter'.

3fill in blank

hard

Fix the error in the store's state definition by completing the code.

Vue

state: () => [1]

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

A[ count: 0 ]

B( count: 0 )

C{ count: 0 }

Dcount: 0

Attempts:

3 left

💡 Hint

Common Mistakes

Using square brackets instead of curly braces

Not wrapping the state in an object

Omitting the return object entirely

The state must return an object, so use curly braces {} with properties inside.

4fill in blank

hard

Fill both blanks to add an action named 'increment' that increases count by 1.

Vue

actions: {
  increment() {
    this.[1] [2] 1;
  }
}

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

Acount

B+=

C-=

DcountValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-=' instead of '+='

Using a wrong property name like 'countValue'

Using '=' which replaces instead of adds

The action modifies the count property by adding 1 using +=.

5fill in blank

hard

Fill all three blanks to add a getter named 'doubleCount' that returns count multiplied by 2.

Vue

getters: {
  doubleCount(state) {
    return state.[1] [2] [3];
  }
}

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

Acount

B*

C2

DcountValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'countValue' instead of 'count'

Using '+' instead of '*'

Multiplying by 1 or wrong number

The getter returns state.count * 2 to double the count value.