Store-to-store interaction in Vue - Performance & Optimization

Performance: Store-to-store interaction

MEDIUM IMPACT

This affects how quickly and efficiently state changes propagate between different stores, impacting UI responsiveness and rendering speed.

Sharing state updates directly between two Vue stores

Vue

import { useStoreA } from './storeA';
import { useStoreB } from './storeB';
import { watch } from 'vue';

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

watch(() => storeA.sharedState, (newVal) => {
  storeB.sharedState = newVal;
});

Using Vue's watch API batches updates and avoids unnecessary immediate re-renders.

📈 Performance GainReduces reflows to a single batch per update cycle, improving interaction speed.

Sharing state updates directly between two Vue stores

Vue

import { useStoreA } from './storeA';
import { useStoreB } from './storeB';

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

storeA.$subscribe(() => {
  storeB.sharedState = storeA.sharedState;
});

Direct subscription causes storeB to update on every storeA change, triggering multiple re-renders and reflows.

📉 Performance CostTriggers 1 reflow per storeA update, causing slower UI responsiveness.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct store subscription	Multiple reactive updates	Multiple reflows per update	High paint cost due to layout thrashing	[X] Bad
Using Vue watch for syncing stores	Single reactive update batch	Single reflow per update cycle	Lower paint cost with batched layout	[OK] Good

Rendering Pipeline

When one store updates another directly, Vue triggers reactive updates causing style recalculation, layout, and paint. Excessive direct updates cause repeated layout thrashing.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout due to repeated reflows from multiple reactive updates

Core Web Vital Affected

INP

This affects how quickly and efficiently state changes propagate between different stores, impacting UI responsiveness and rendering speed.

Optimization Tips

1Avoid direct store-to-store subscriptions that cause immediate reactive updates.

2Use Vue's watch or computed properties to batch and control state syncing.

3Monitor layout thrashing in DevTools to catch inefficient store interactions early.

Performance Quiz - 3 Questions

What is a common performance issue with direct store-to-store subscriptions in Vue?

A They reduce bundle size significantly.

B They cause multiple reflows and slow UI responsiveness.

C They improve Largest Contentful Paint (LCP).

D They eliminate the need for reactive state.

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for frequent layout and paint events triggered by store updates.

What to look for: Multiple layout thrashing events indicate inefficient store-to-store updates; fewer, batched layout events indicate good performance.