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.