Using stores in components in Vue - Step-by-Step Execution

Concept Flow - Using stores in components

Import store

↓

Access store state

↓

Use state in template

↓

Trigger store action/mutation

↓

Store updates state

↓

Component re-renders with new state

This flow shows how a Vue component imports a store, reads its state, uses it in the template, triggers actions to update the store, and then re-renders with updated data.

Execution Sample

Vue

import { useCounterStore } from './stores/counter'
const counter = useCounterStore()
console.log(counter.count)
counter.increment()

This code imports a store, accesses its count state, logs it, then calls an increment action to update the count.

Execution Table

Step	Action	Store State Before	Operation	Store State After	Component Update
1	Import store and create instance	count: 0	useCounterStore()	count: 0	No render yet
2	Read count value	count: 0	console.log(counter.count)	count: 0	No change
3	Call increment action	count: 0	counter.increment()	count: 1	Component re-renders with count=1
4	Read updated count	count: 1	console.log(counter.count)	count: 1	No change
5	No further actions	count: 1	End of trace	count: 1	Stable render with count=1

💡 No more actions; store state stable and component shows updated count

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
count	undefined	0	1	1

Key Moments - 2 Insights

Why does the component re-render after calling increment()?

Because the store's state 'count' changes from 0 to 1 at step 3, Vue detects this reactive change and updates the component to show the new count, as seen in the execution_table row 3.

Does reading the count value cause the component to re-render?

No, reading the count (step 2 and 4) does not change state, so no re-render happens. Only state changes trigger re-renders.

Visual Quiz - 3 Questions

Look at the execution table at step 3. What is the value of 'count' after calling increment()?

A 0

B 1

C undefined

D 2

💡 Hint

Check the 'Store State After' column at step 3 in the execution_table.

At which step does the component re-render with the updated count?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Component Update' column in the execution_table.

If we did not call increment(), what would the final count value be?

A 0

B 1

C undefined

D Cannot tell

💡 Hint

Refer to the 'Store State After' column before step 3 in the execution_table.

Concept Snapshot

Using stores in Vue components:
- Import the store with useStore function
- Access reactive state properties
- Use state in template for display
- Call actions/mutations to update state
- Component auto re-renders on state change

Full Transcript

This visual trace shows how a Vue component uses a store. First, the store is imported and an instance is created with useCounterStore. Initially, the count state is 0. Reading the count does not cause any change. When the increment action is called, the store updates count from 0 to 1. Vue detects this reactive change and re-renders the component to show the new count. Subsequent reads show the updated value. This demonstrates the reactive flow of using stores in Vue components.