Store-to-store interaction in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a Vue Composition API function often used with Pinia stores.

Vue

import { defineStore } from 'pinia';
import { [1] } from 'vue';

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

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'computed' instead of 'ref' when importing from 'vue'.

Forgetting to import 'ref' when working with reactive data.

We use ref to create reactive references in Vue 3, which is often imported alongside stores.

2fill in blank

medium

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

Vue

export const useUserStore = defineStore('[1]', {
  state: () => ({
    name: '',
    age: 0
  })
});

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

Aprofile

BuserStore

Cuser

Daccount

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name 'useUserStore' as the store id string.

Using uppercase letters in the store id.

The store id should be a unique string. Here, 'user' is used as the store id.

3fill in blank

hard

Fix the error in accessing another store inside a Pinia store action.

Vue

import { defineStore } from 'pinia';
import { useCartStore } from './cartStore';

export const useUserStore = defineStore('user', {
  actions: {
    addToCart(product) {
      const cart = [1]();
      cart.add(product);
    }
  }
});

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

AuseStore

BuseCartStore

CuseProductStore

DuseUserStore

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the wrong store function like 'useUserStore' inside the user store.

Trying to access the store without calling the function.

To access another store inside a store, you call its use function, here useCartStore().

4fill in blank

hard

Fill both blanks to correctly update state from another store inside an action.

Vue

export const useOrderStore = defineStore('order', {
  actions: {
    placeOrder() {
      const cart = [1]();
      this.items = cart.[2];
    }
  },
  state: () => ({
    items: []
  })
});

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

AuseCartStore

Bproducts

Citems

DuseProductStore

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'products' instead of 'items' for the cart state property.

Calling the wrong store function like 'useProductStore'.

We get the cart store instance with useCartStore() and access its items state to update the order store.

5fill in blank

hard

Fill all three blanks to create a store that reacts to another store's state using a getter.

Vue

export const useDiscountStore = defineStore('discount', {
  getters: {
    totalDiscount(state) {
      const cart = [1]();
      return cart.[2] * state.[3];
    }
  },
  state: () => ({
    discountRate: 0.1
  })
});

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

AuseCartStore

BtotalPrice

CdiscountRate

DuseUserStore

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'useUserStore' instead of 'useCartStore'.

Accessing wrong state properties like 'items' instead of 'totalPrice'.

The discount store gets the cart store instance with useCartStore(), accesses totalPrice from cart, and multiplies by its own discountRate.