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

Need a 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

Need a 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 }
})

Need a 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

Need a hint?

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