Store-to-store interaction in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does one Vue store update another store's state?

Given two Vue stores using Pinia, useStoreA and useStoreB, how can useStoreA update a state property in useStoreB?

Vue

import { defineStore } from 'pinia';

export const useStoreA = defineStore('storeA', {
  state: () => ({ countA: 0 }),
  actions: {
    incrementB() {
      // What goes here?
    }
  }
});

export const useStoreB = defineStore('storeB', {
  state: () => ({ countB: 0 }),
  actions: {
    increment() {
      this.countB++;
    }
  }
});

A import { useStoreB } from './storeB'; useStoreB.increment();

B const storeB = useStoreB(); storeB.increment();

C useStoreB.increment();

D this.$storeB.increment();

💡 Hint

Remember to call the other store's function by first creating its instance inside the action.

In Pinia, to interact with another store, you must first create its instance by calling its useStore function. Then you can call its actions or access its state. Option B correctly creates storeB instance and calls increment().

❓ state_output

intermediate

What is the value of storeB.countB after calling storeA.incrementB() twice?

Assuming the stores from the previous challenge, what will be the value of storeB.countB after calling storeA.incrementB() two times?

Vue

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

storeA.incrementB();
storeA.incrementB();

console.log(storeB.countB);

A 0

B undefined

C 1

D 2

💡 Hint

Each call to incrementB() calls storeB.increment() once.

Each call to storeA.incrementB() calls storeB.increment(), which increases countB by 1. Two calls increase countB from 0 to 2.

📝 Syntax

advanced

Which option correctly imports and uses another store inside a Pinia store?

Identify the correct syntax to import and use useStoreB inside useStoreA for store-to-store interaction.

A

import useStoreB from './storeB';

export const useStoreA = defineStore('storeA', {
  actions: {
    updateB() {
      useStoreB.countB = 5;
    }
  }
});

B

export const useStoreA = defineStore('storeA', {
  actions: {
    updateB() {
      const storeB = require('./storeB');
      storeB.countB = 5;
    }
  }
});

C

import { useStoreB } from './storeB';

export const useStoreA = defineStore('storeA', {
  actions: {
    updateB() {
      const storeB = useStoreB();
      storeB.countB = 5;
    }
  }
});

D

import { useStoreB } from './storeB';

export const useStoreA = defineStore('storeA', {
  actions: {
    updateB() {
      useStoreB.countB = 5;
    }
  }
});

💡 Hint

Remember to import the store as a named import and call it as a function to get the instance.

Option C correctly imports useStoreB as a named import and calls it to get the store instance before updating state. Option C uses CommonJS require which is invalid in ES modules. Options A and C try to access state on the function itself, not the instance.

🔧 Debug

advanced

Why does this store-to-store update not reflect in the UI?

Consider two Pinia stores where storeA updates storeB's state directly. The UI bound to storeB.countB does not update after the change. Why?

Vue

export const useStoreA = defineStore('storeA', {
  actions: {
    updateB() {
      const storeB = useStoreB();
      storeB.countB = 10; // direct assignment
    }
  }
});

A Direct assignment to state property bypasses Vue reactivity; must use a Pinia action to update state.

B storeB instance is not reactive because it was not created with defineStore.

C UI does not update because storeB.countB is a computed property and cannot be assigned.

D Pinia does not support store-to-store interaction; state cannot be shared.

💡 Hint

Think about how Vue tracks changes and updates the UI.

Directly assigning to a state property outside of a Pinia action can bypass Vue's reactivity system, especially if the property was not reactive or the assignment does not trigger reactivity. The recommended way is to update state inside actions to ensure reactivity and UI updates.

🧠 Conceptual

expert

What is the best practice for sharing state between two Pinia stores to keep them decoupled?

You want two Pinia stores to share some state but keep them loosely coupled. Which approach is best?

A Create a third shared store that holds the common state; both stores import and use it.

B Directly import one store inside the other and modify its state directly.

C Use global variables outside Pinia to hold shared state accessed by both stores.

D Duplicate the shared state in both stores and synchronize manually with watchers.

💡 Hint

Think about modularity and avoiding tight coupling.

Creating a dedicated shared store for common state is the best practice. It keeps stores decoupled, avoids direct dependencies, and leverages Pinia's reactivity. Direct imports cause tight coupling, global variables break reactivity, and manual sync is error-prone.

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