Store-to-store interaction in Vue - Step-by-Step Execution

Concept Flow - Store-to-store interaction

Store A updates state

↓

Store A triggers event or exposes getter

↓

Store B listens or accesses Store A

↓

Store B updates its own state based on Store A

↓

Components using Store B react to changes

This flow shows how one Vue store updates its state, which then influences another store's state, enabling reactive data sharing.

Execution Sample

Vue

import { defineStore } from 'pinia';
import { computed } from 'vue';

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

export const useStoreB = defineStore('storeB', () => {
  const storeA = useStoreA();
  const doubleCount = computed(() => storeA.count * 2);
  return { doubleCount };
});

Store A has a count and an increment action; Store B reads Store A's count and computes doubleCount reactively.

Execution Table

Step	Action	Store A count	Store B doubleCount	Effect
1	Initialize Store A and Store B	0	0	Stores created, doubleCount = 0
2	Call storeA.increment()	1	2	count increments, doubleCount updates reactively
3	Call storeA.increment() again	2	4	count increments, doubleCount updates reactively
4	No further actions	2	4	State stable, no changes

💡 No more actions; reactive updates keep Store B in sync with Store A

Variable Tracker

Variable	Start	After 1	After 2	Final
storeA.count	0	1	2	2
storeB.doubleCount	0	2	4	4

Key Moments - 2 Insights

Why does storeB.doubleCount update automatically when storeA.count changes?

Because storeB.doubleCount is a computed property depending on storeA.count, Vue's reactivity system updates it automatically as shown in execution_table rows 2 and 3.

Can storeB change storeA's count directly?

No, storeB only reads storeA's state; to change storeA's count, you must call storeA's actions like increment(), as shown in step 2.

Visual Quiz - 3 Questions

Look at the execution table, what is storeB.doubleCount after the first increment?

A 0

B 1

C 2

D 4

💡 Hint

Check row 2 under storeB.doubleCount in the execution_table

At which step does storeA.count become 2?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at storeA.count values in execution_table rows

If storeA.increment() was not called, what would storeB.doubleCount be at step 3?

A 4

B 0

C 2

D Undefined

💡 Hint

Refer to variable_tracker and execution_table initial values

Concept Snapshot

Store-to-store interaction in Vue with Pinia:
- Store A holds state and actions.
- Store B imports Store A and uses its state.
- Store B uses computed properties to react to Store A changes.
- Changes in Store A trigger reactive updates in Store B.
- Components using Store B see updated values automatically.

Full Transcript

This example shows how two Vue stores interact using Pinia. Store A has a count state and an increment action. Store B imports Store A and defines a computed property doubleCount that doubles Store A's count. When storeA.increment() is called, storeA.count increases, and storeB.doubleCount updates automatically due to Vue's reactivity. The execution table traces these changes step-by-step, showing how state flows from Store A to Store B. Key moments clarify why computed properties update and that Store B cannot directly modify Store A's state. The visual quiz tests understanding of these reactive updates and state changes.