Defining state in stores in Vue - Step-by-Step Execution

Concept Flow - Defining state in stores

Create store file

↓

Define state object

↓

Export store function

↓

Use store in component

↓

Access reactive state

↓

Update state triggers UI update

This flow shows how you create a store by defining state, export it, use it in components, and how state changes update the UI.

Execution Sample

Vue

import { reactive } from 'vue'

export const useCounterStore = () => {
  const state = reactive({ count: 0 })
  return { state }
}

Defines a simple store with a reactive state object holding a count starting at 0.

Execution Table

Step	Action	State Before	State After	Effect
1	Import reactive from Vue	N/A	N/A	Ready to create reactive state
2	Define state = reactive({ count: 0 })	N/A	{ count: 0 }	State object created with count 0
3	Return { state } from store function	{ count: 0 }	{ count: 0 }	Store exposes reactive state
4	Component calls useCounterStore()	N/A	{ count: 0 }	Component gets reactive state
5	Component reads state.count	{ count: 0 }	{ count: 0 }	UI shows count 0
6	Component updates state.count = 1	{ count: 0 }	{ count: 1 }	UI updates to show count 1
7	Component updates state.count = 5	{ count: 1 }	{ count: 5 }	UI updates to show count 5
8	Component unmounts or store discarded	{ count: 5 }	N/A	State no longer used

💡 Store usage ends when component unmounts or store is no longer referenced.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 6	After Step 7	Final
state.count	N/A	0	0	1	5	N/A

Key Moments - 3 Insights

Why do we use reactive() to define state instead of a plain object?

Using reactive() makes the state reactive, so Vue tracks changes and updates the UI automatically, as shown in steps 2 and 6 of the execution_table.

What happens if we change state.count directly in the component?

Changing state.count directly updates the reactive state and triggers UI updates, as seen in steps 6 and 7 where the UI reflects new count values.

Why do we return the state object from the store function?

Returning the state object allows components to access and reactively use the shared state, demonstrated in step 3 and 4 where the component receives the reactive state.

Visual Quiz - 3 Questions

Look at the execution_table at step 2. What is the value of state.count after defining the reactive state?

A null

B undefined

C 0

D 1

💡 Hint

Check the 'State After' column in step 2 of the execution_table.

At which step does the UI first update to show count = 1?

A Step 6

B Step 5

C Step 4

D Step 7

💡 Hint

Look for the step where state.count changes from 0 to 1 and UI updates.

If we did not use reactive() and used a plain object for state, what would happen?

A UI would update normally

B State changes would not trigger UI updates

C Code would throw an error

D State would be immutable

💡 Hint

Refer to the key_moments explanation about reactive() usage.

Concept Snapshot

Defining state in stores in Vue:
- Use reactive() to create reactive state objects.
- Export a function returning the state.
- Components call this function to access shared reactive state.
- Changing state properties updates the UI automatically.
- This pattern centralizes state for easy reuse and reactivity.

Full Transcript

This visual execution trace shows how to define state in Vue stores using reactive(). First, reactive is imported from Vue. Then, a state object is created with reactive({ count: 0 }), making count reactive. The store function returns this state object. When a component calls the store function, it receives the reactive state. Reading state.count shows 0 initially. Updating state.count to 1 or 5 triggers UI updates reflecting these values. The reactive wrapper ensures Vue tracks changes and updates the UI automatically. This pattern helps share and manage state across components efficiently.