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.

Practice

1. What is the main benefit of using type-safe stores with Pinia in a Vue application?

easy

A. It speeds up the app by caching data on the server.

B. It automatically styles components based on state.

C. It replaces Vue Router for navigation.

D. It helps catch errors by checking data types during development.

Solution

1. Step 1: Understand type safety in programming

   Type safety means the system checks that data matches expected types, reducing bugs.

2. Step 2: Connect type safety to Pinia stores

   Pinia stores with types ensure state and actions use correct data types, catching mistakes early.

3. Final Answer:

   It helps catch errors by checking data types during development. -> Option D

4. Quick Check:

   Type safety = catches type errors [OK]

Hint: Type-safe means checking data types to avoid bugs [OK]

Common Mistakes:

• Confusing type safety with styling or UI features
• Thinking Pinia replaces routing
• Assuming type safety improves runtime speed

2. Which of the following is the correct way to define a Pinia store with TypeScript for a state property count of type number?

easy

A. const useStore = defineStore('main', { state: () => ({ count: '0' }) })

B. const useStore = defineStore('main', { state: () => { count: 0 as number } })

C. const useStore = defineStore('main', { state: () => ({ count: 0 }) })

D. const useStore = defineStore('main', { state: () => ({ count: Number }) })

Solution

1. Step 1: Check state initialization syntax

   State is a function returning an object with initial values; count should be a number, not string or type.

2. Step 2: Identify correct type-safe initialization

   Using count: 0 correctly sets count as number; as number is unnecessary here.

3. Final Answer:

   const useStore = defineStore('main', { state: () => ({ count: 0 }) }) -> Option C

4. Quick Check:

   State count initialized as number = const useStore = defineStore('main', { state: () => ({ count: 0 }) }) [OK]

Hint: Initialize state with correct value type directly [OK]

Common Mistakes:

• Using string '0' instead of number 0
• Using type casts unnecessarily in state
• Assigning type constructors like Number instead of values

3. Given this Pinia store using TypeScript:

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

const store = useCounterStore()
store.increment()
console.log(store.count)

What will be logged to the console?

medium

A. 5

B. 6

C. undefined

D. Error: count is readonly

Solution

1. Step 1: Understand initial state and action effect

   The state count starts at 5. The increment action increases it by 1.

2. Step 2: Trace the code execution

   Calling store.increment() changes count from 5 to 6, then logging outputs 6.

3. Final Answer:

   6 -> Option B

4. Quick Check:

   5 + 1 = 6 [OK]

Hint: Increment adds 1 to count, so output is 6 [OK]

Common Mistakes:

• Thinking state is immutable and causes error
• Forgetting increment changes count
• Assuming initial value remains unchanged

4. Identify the error in this Pinia store definition using TypeScript:

const useStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count = this.count + 1
    },
    reset() {
      this.count = 'zero'
    }
  }
})

medium

A. Using string 'zero' to assign to number state property count causes a type error.

B. The increment method should use this.count++ instead of addition.

C. State must be an object, not a function returning an object.

D. The store name 'main' is invalid and must be uppercase.

Solution

1. Step 1: Check state type and assignments

   The state count is a number initialized to 0.

2. Step 2: Identify type mismatch in actions

   In reset(), assigning string 'zero' to count breaks type safety, causing error.

3. Final Answer:

   Using string 'zero' to assign to number state property count causes a type error. -> Option A

4. Quick Check:

   Assigning wrong type to state = Using string 'zero' to assign to number state property count causes a type error. [OK]

Hint: State types must match assigned values exactly [OK]

Common Mistakes:

• Ignoring type mismatch errors
• Thinking addition syntax is wrong
• Believing state must be plain object, not function
• Assuming store names must be uppercase

5. You want to create a type-safe Pinia store for a user profile with state properties name (string), age (number), and an action updateProfile that accepts a partial object to update state. Which approach correctly ensures type safety?

hard

A. Define an interface for state, use it in store, and type updateProfile parameter as Partial<State>.

B. Use any type for state and action parameters to allow flexibility.

C. Define state without types and cast inside updateProfile to avoid errors.

D. Use separate stores for each property to avoid typing complexity.

Solution

1. Step 1: Define a TypeScript interface for the state

   Creating an interface with name: string and age: number sets clear expected types.

2. Step 2: Use Partial<State> in updateProfile parameter

   This allows updating any subset of properties while keeping type safety.

3. Step 3: Implement store using interface and typed action

   Using the interface in defineStore and typing updateProfile ensures safe updates.

4. Final Answer:

   Define an interface for state, use it in store, and type updateProfile parameter as Partial<State>. -> Option A

5. Quick Check:

   Interface + Partial parameter = Define an interface for state, use it in store, and type updateProfile parameter as Partial<State>. [OK]

Hint: Use interfaces and Partial type for safe partial updates [OK]

Common Mistakes:

• Using any type loses type safety
• Casting types inside actions hides errors
• Splitting state unnecessarily complicates design