Dependency injection patterns in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to provide a value using Vue's provide function.

Vue

<script setup>
import { provide } from 'vue'
const message = 'Hello from provider'
provide([1], message)
</script>

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

A'messageKey'

Bmessage

Cinject

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using the value instead of a key as the first argument.

Using inject instead of provide.

The provide function needs a key as the first argument to identify the value. Here, 'messageKey' is the key used to provide the message.

2fill in blank

medium

Complete the code to inject the provided value using Vue's inject function.

Vue

<script setup>
import { inject } from 'vue'
const receivedMessage = inject([1])
</script>

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

Aref

Bmessage

Cprovide

D'messageKey'

Attempts:

3 left

💡 Hint

Common Mistakes

Using the value instead of the key.

Using provide instead of inject.

The inject function requires the same key used in provide to receive the value. Here, 'messageKey' is the key.

3fill in blank

hard

Fix the error in the code to correctly inject a default value if the key is not provided.

Vue

<script setup>
import { inject } from 'vue'
const count = inject('countKey', [1])
</script>

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

Anull

B0

C'0'

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string '0' instead of number 0.

Using undefined which means no default.

The second argument to inject is the default value if the key is not found. Here, 0 is a number default count.

4fill in blank

hard

Fill both blanks to provide and inject a reactive value using Vue's ref.

Vue

<script setup>
import { ref, provide, inject } from 'vue'
const count = ref(0)
provide([1], count)
const injectedCount = inject([2])
</script>

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

A'countKey'

Bcount

C'countKeyInjected'

Attempts:

3 left

💡 Hint

Common Mistakes

Using different keys for provide and inject.

Using the variable name instead of a string key.

Both provide and inject must use the same key string to share the reactive count value. Here, 'countKey' is used for both.

5fill in blank

hard

Fill all three blanks to create a reactive object, provide it, and inject it in a child component.

Vue

<script setup>
import { reactive, provide, inject } from 'vue'
const state = reactive({ count: 0 })
provide([1], state)
const injectedState = inject([2])
console.log(injectedState[3])
</script>

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

A'stateKey'

Bstate

C.count

D'stateKeyInjected'

Attempts:

3 left

💡 Hint

Common Mistakes

Using different keys for provide and inject.

Forgetting to access the count property with .count.

The reactive object state is provided and injected using the same key 'stateKey'. Accessing injectedState.count shows the reactive count value.