Store-to-store interaction in Vue - Mini Project: Build & Apply

Store-to-store interaction

📖 Scenario: You are building a small Vue 3 app with two separate stores. One store manages a list of products, and the other store manages a shopping cart. You want the cart store to react to changes in the product store, such as updating product availability.

🎯 Goal: Create two Pinia stores: useProductStore and useCartStore. The useCartStore should watch the products in useProductStore and update the cart items accordingly.

📋 What You'll Learn

Create a Pinia store called useProductStore with a products array containing objects with id, name, and available properties.

Create a Pinia store called useCartStore with a cartItems array containing objects with productId and quantity.

In useCartStore, add a watcher that reacts to changes in products from useProductStore and removes cart items for products that are no longer available.

Use Vue 3 Composition API and Pinia 2+ syntax with defineStore and watch.

💡 Why This Matters

🌍 Real World

Many real-world Vue apps use multiple stores to separate concerns, such as products and cart. Keeping stores in sync is essential for a smooth user experience.

💼 Career

Understanding store-to-store interaction is important for frontend developers working with Vue and Pinia in e-commerce or complex state management scenarios.

1

Create the product store with initial products

Create a Pinia store called useProductStore using defineStore. Inside it, create a state function that returns an object with a products array containing these exact objects: { id: 1, name: 'Apple', available: true }, { id: 2, name: 'Banana', available: true }, and { id: 3, name: 'Cherry', available: false }.

Vue

// Your code here to create useProductStore with products array

Hint

Use defineStore with a state function returning the products array exactly as specified.

2

Create the cart store with initial cart items

Create a Pinia store called useCartStore using defineStore. Inside it, create a state function that returns an object with a cartItems array containing these exact objects: { productId: 1, quantity: 2 } and { productId: 3, quantity: 1 }.

Vue

import { defineStore } from 'pinia'

export const useProductStore = defineStore('product', {
  state: () => ({
    products: [
      { id: 1, name: 'Apple', available: true },
      { id: 2, name: 'Banana', available: true },
      { id: 3, name: 'Cherry', available: false }
    ]
  })
})

// Your code here to create useCartStore with cartItems array

Hint

Use defineStore with a state function returning the cartItems array exactly as specified.

3

Add a watcher in the cart store to react to product availability

In the useCartStore, import watch from 'vue' and useProductStore. Inside the store, create a watch that observes productStore.products. When products change, filter cartItems to keep only items whose productId matches a product with available === true.

Vue

import { defineStore } from 'pinia'
import { watch } from 'vue'
import { useProductStore } from './productStore'

export const useProductStore = defineStore('product', {
  state: () => ({
    products: [
      { id: 1, name: 'Apple', available: true },
      { id: 2, name: 'Banana', available: true },
      { id: 3, name: 'Cherry', available: false }
    ]
  })
})

export const useCartStore = defineStore('cart', () => {
  const productStore = useProductStore()
  const cartItems = ref([
    { productId: 1, quantity: 2 },
    { productId: 3, quantity: 1 }
  ])

  // Your code here to watch productStore.products and update cartItems

  return { cartItems }
})

Hint

Use watch on productStore.products and update cartItems.value by filtering only available products.

4

Export both stores and finalize the setup

Ensure both useProductStore and useCartStore are exported from the same file. Confirm the useCartStore uses the Composition API style with ref and watch as implemented. This completes the store-to-store interaction setup.

Vue

import { defineStore } from 'pinia'
import { watch, ref } from 'vue'
import { useProductStore } from './productStore'

// Your code here to export both stores and finalize setup

Hint

Make sure both stores are exported and the cart store uses ref, watch, and returns cartItems.

Practice

1. What is the main purpose of store-to-store interaction in Vue's Pinia stores?

easy

A. To create multiple independent stores without any connection

B. To allow one store to access or call actions from another store

C. To replace Vue components with stores

D. To automatically sync stores with a backend database

Solution

1. Step 1: Understand store-to-store interaction

   Store-to-store interaction means one store can use another store's state or actions to share data or trigger updates.

2. Step 2: Identify the purpose

   This interaction helps keep data consistent by letting stores communicate, not by replacing components or syncing automatically.

3. Final Answer:

   To allow one store to access or call actions from another store -> Option B

4. Quick Check:

   Store-to-store interaction = Access other store's actions/state [OK]

Hint: Remember: stores talk by calling each other's actions [OK]

Common Mistakes:

• Thinking stores replace components
• Assuming stores sync automatically with backend
• Believing stores are always independent

2. Which of the following is the correct way to use one Pinia store inside another in Vue 3?

easy

A. const storeA = useStoreA(); const storeB = useStoreB(); import { useStoreA } from './storeA';

B. import useStoreA from './storeA'; const storeB = useStoreB();

C. const storeA = useStoreB(); const storeB = useStoreA();

D. import { useStoreA } from './storeA'; const storeB = useStoreB(); const storeA = useStoreA();

Solution

1. Step 1: Import the store function before usage

   You must import the store function (e.g., useStoreA) before calling it to get the store instance.

2. Step 2: Call the store functions to get instances

   Call useStoreA() and useStoreB() to get their store instances for interaction.

3. Final Answer:

   import { useStoreA } from './storeA'; const storeB = useStoreB(); const storeA = useStoreA(); -> Option D

4. Quick Check:

   Import then call stores = correct syntax [OK]

Hint: Always import store before calling useStore() [OK]

Common Mistakes:

• Calling useStore before importing
• Mixing store names when calling
• Incorrect import syntax without braces

3. Given these two Pinia stores, what will be the console output after calling storeB.incrementA()?

const useStoreA = defineStore('A', {
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++ } }
});

const useStoreB = defineStore('B', {
  actions: {
    incrementA() {
      const storeA = useStoreA();
      storeA.increment();
      console.log(storeA.count);
    }
  }
});

const storeB = useStoreB();
storeB.incrementA();

medium

A. 1

B. 0

C. undefined

D. Error: useStoreA is not defined

Solution

1. Step 1: Understand storeA initial state and increment

   storeA starts with count = 0. Calling increment() increases count by 1.

2. Step 2: Trace incrementA action in storeB

   incrementA calls storeA.increment(), then logs storeA.count which is now 1.

3. Final Answer:

   1 -> Option A

4. Quick Check:

   Increment count from 0 to 1, then log 1 [OK]

Hint: Calling other store's action updates its state immediately [OK]

Common Mistakes:

• Assuming count stays 0 after increment
• Thinking console logs undefined
• Forgetting to call useStoreA inside action

4. What is wrong with this code snippet trying to use storeA inside storeB?

const useStoreA = defineStore('A', {
  state: () => ({ value: 10 })
});

const useStoreB = defineStore('B', {
  actions: {
    updateValue() {
      const storeA = useStoreA;
      storeA.value = 20;
    }
  }
});

medium

A. defineStore cannot be used inside actions

B. Cannot assign value directly to storeA.value

C. useStoreA is not called as a function, so storeA is not a store instance

D. State must be a function returning an object

Solution

1. Step 1: Check how useStoreA is used inside updateValue

   useStoreA is referenced without parentheses, so storeA is a function reference, not a store instance.

2. Step 2: Understand consequences of missing parentheses

   Without calling useStoreA(), you cannot access or modify state like storeA.value.

3. Final Answer:

   useStoreA is not called as a function, so storeA is not a store instance -> Option C

4. Quick Check:

   Call useStoreA() to get store instance [OK]

Hint: Always call useStore() with () to get the store [OK]

Common Mistakes:

• Forgetting parentheses when calling useStore
• Trying to assign state directly without actions
• Misunderstanding defineStore usage

5. You have two stores: useCartStore managing cart items and useUserStore managing user info. You want to clear the cart when the user logs out. How should you implement this store-to-store interaction inside useUserStore?

hard

A. Inside the logout action, call const cart = useCartStore(); cart.clearItems();

B. Emit an event from useUserStore and listen in useCartStore to clear items

C. Directly modify useCartStore state without calling its actions

D. Reset useUserStore state and expect useCartStore to reset automatically

Solution

1. Step 1: Identify the correct way to trigger cart clearing

   Calling useCartStore() inside useUserStore's logout action gets the cart store instance.

2. Step 2: Use cart store's action to clear items

   Calling cart.clearItems() properly updates the cart state in a controlled way.

3. Final Answer:

   Inside the logout action, call const cart = useCartStore(); cart.clearItems(); -> Option A

4. Quick Check:

   Call other store's action inside logout to clear cart [OK]

Hint: Call other store's action inside your store's action [OK]

Common Mistakes:

• Trying to modify other store's state directly
• Using events instead of direct store calls
• Expecting automatic reset without explicit calls