Type-safe stores with Pinia in Vue - Step-by-Step Execution

Concept Flow - Type-safe stores with Pinia

Define store with types

↓

Create store instance

↓

Access state with type safety

↓

Update state with typed actions

↓

Use store in components

↓

Type errors caught at compile time

This flow shows how you define a Pinia store with types, use it safely in components, and catch errors early.

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 typed state and an action to increment the count.

Execution Table

Step	Action	State Before	State After	Type Check
1	Define store with state count=0	N/A	{ count: 0 }	Pass
2	Create store instance useCounterStore	{ count: 0 }	{ count: 0 }	Pass
3	Call increment action	{ count: 0 }	{ count: 1 }	Pass
4	Try assigning count = 'a string'	{ count: 1 }	Error	Fail - TypeScript error
5	Use store in component template	{ count: 1 }	{ count: 1 }	Pass

💡 Execution stops because assigning a wrong type to count causes a TypeScript error.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 4	Final
count	undefined	0	1	Error (type mismatch)	1

Key Moments - 3 Insights

Why does assigning a string to count cause an error?

Because count is typed as a number in the store state, assigning a string breaks type safety as shown in step 4 of the execution table.

How does Pinia ensure state updates are type-safe?

Pinia uses TypeScript types defined in the store, so actions like increment() can only update state properties with correct types, as seen in step 3.

What happens if you try to access a state property that doesn't exist?

TypeScript will show an error during development because the store's type definition does not include that property, preventing runtime bugs.

Visual Quiz - 3 Questions

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

A 1

B 0

C 'a string'

D undefined

💡 Hint

Check the 'State After' column for step 3 in the execution table.

At which step does a type error occur when assigning a wrong value?

A Step 2

B Step 4

C Step 5

D Step 1

💡 Hint

Look for 'Fail - TypeScript error' in the 'Type Check' column.

If you add a new state property without typing it, what will happen?

A TypeScript will allow it without errors

B Pinia will throw a runtime error

C TypeScript will show an error during development

D The store will ignore the new property

💡 Hint

Refer to the key moment about accessing undefined state properties.

Concept Snapshot

Type-safe stores with Pinia:
- Define store with typed state and actions
- Use defineStore() to create store
- Access and update state with type safety
- TypeScript catches wrong types early
- Use store in Vue components safely

Full Transcript

This visual execution shows how to create a type-safe store using Pinia in Vue. First, you define the store with a typed state and actions. Then you create an instance of the store. When you call actions like increment, the state updates with correct types. If you try to assign a wrong type, TypeScript shows an error and stops execution. This helps catch bugs early. Using the store in components is safe because types guide correct usage. The variable tracker shows how the count state changes from 0 to 1, and errors if misused. Key moments explain why type errors happen and how Pinia enforces type safety. The quiz tests understanding of state changes and type errors.