Creating a Pinia store in Vue - Visual Walkthrough

Concept Flow - Creating a Pinia store

Import createPinia

↓

Create Pinia instance

↓

Define store with defineStore

↓

Use store in component

↓

Access state, actions

↓

Update state via actions

↓

Component reacts to state changes

This flow shows how to create a Pinia store, use it in a Vue component, and update state reactively.

Execution Sample

Vue

import { defineStore } from 'pinia'

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

Defines a Pinia store named 'counter' with a count state and an increment action.

Execution Table

Step	Action	State Before	State After	Output/Effect
1	Call defineStore to create 'counter' store	No store	Store created with count=0	Store ready to use
2	Component calls useCounterStore()	Store exists with count=0	Store instance with count=0	Component gets store instance
3	Call increment() action	count=0	count=1	State updated, component re-renders
4	Call increment() action again	count=1	count=2	State updated, component re-renders
5	Component reads count	count=2	count=2	Component shows count=2

💡 Execution stops after state updates and component reflects latest count

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
count	0	1	2	2

Key Moments - 3 Insights

Why does the component update when count changes?

Because Pinia makes the state reactive, so when increment() changes count, the component automatically re-renders (see steps 3 and 4 in execution_table).

What does defineStore('counter', {...}) do?

It creates a reusable store definition named 'counter' that holds state and actions, ready to be used in components (step 1).

Why do we call useCounterStore() inside the component?

To get the store instance with its reactive state and actions, so the component can read and update the store (step 2).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of count after step 3?

A 0

B 2

C 1

D Undefined

💡 Hint

Check the 'State After' column for step 3 in the execution_table.

At which step does the component get the store instance?

A Step 1

B Step 2

C Step 3

D Step 5

💡 Hint

Look for when useCounterStore() is called in the execution_table.

If increment() was never called, what would count be at step 5?

A 0

B 1

C 2

D Undefined

💡 Hint

Refer to variable_tracker to see count changes after increment calls.

Concept Snapshot

Creating a Pinia store:
- Import defineStore from 'pinia'
- Use defineStore('name', { state, actions }) to define store
- Call useStore() in components to access store
- State is reactive; updating state triggers component updates
- Actions modify state safely and clearly

Full Transcript

This visual execution shows how to create a Pinia store in Vue. First, defineStore creates a store named 'counter' with a count state starting at 0 and an increment action. When a component calls useCounterStore(), it gets the store instance. Calling increment() increases count by 1 each time, and the component updates automatically because Pinia makes state reactive. The execution table tracks each step, showing state before and after actions. The variable tracker shows how count changes from 0 to 2 after two increments. Key moments clarify why components update and how the store is used. The quiz tests understanding of state changes and store usage. This helps beginners see how Pinia manages state simply and reactively.