Using stores in components in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the store in a Vue component.

Vue

<script setup>
import { [1] } from '@/stores/counter'
</script>

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

AdefineStore

BcreateStore

CuseCounterStore

DuseStore

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'createStore' which is for creating a store, not importing it.

Using 'defineStore' which is used inside the store file, not for importing.

Using a generic 'useStore' which may not exist.

You import the store function by its name, usually starting with 'use' followed by the store name, here 'useCounterStore'.

2fill in blank

medium

Complete the code to create a store instance inside the component.

Vue

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = [1]()
</script>

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

AuseCounterStore

BcreateStore

CdefineStore

DuseStore

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call 'createStore' which is not imported here.

Using 'defineStore' which is for defining stores, not using them.

Using 'useStore' which is not imported.

You call the imported store function to get the store instance inside the component.

3fill in blank

hard

Fix the error in accessing the store's state property.

Vue

<template>
  <p>Count: {{ counter.[1] }}</p>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

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

Acounter

Bstate

Cvalue

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use 'state' which is not reactive in template.

Using 'value' which is for refs, not store state.

Using 'counter' which is the store instance, not a property.

You access the state property directly by its name, here 'count', not 'state' or 'value'.

4fill in blank

hard

Fill both blanks to call a store action and update the count.

Vue

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
counter.[1]([2])
</script>

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

Aincrement

B5

Cdecrement

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'decrement' instead of 'increment' when increasing count.

Passing 10 instead of 5 as argument.

Calling the action without parentheses.

You call the 'increment' action with the number 5 to increase the count by 5.

5fill in blank

hard

Fill all three blanks to create a reactive computed property from the store's count.

Vue

<script setup>
import { useCounterStore } from '@/stores/counter'
import { computed } from 'vue'
const counter = useCounterStore()
const doubleCount = computed(() => counter.[1] * [2])
const tripleCount = computed(() => counter.[3] * 3)
</script>

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

Acount

B2

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'value' which is not a store property.

Mixing up multipliers or property names.

Not using computed for reactive calculations.

You access 'count' from the store and multiply by 2 and 3 for double and triple counts.