Locating the Pinia Store for Word Practice State Management in TypeWords

The word-practice state in TypeWords is managed by the practice Pinia store located at app/core/stores/practice.ts, which handles practice stages, timer segments, and word counters through a centralized state container.

The TypeWords application uses Pinia for state management, with dedicated stores for different functional domains. The Pinia store for word practice state management in TypeWords centralizes all logic related to typing practice sessions, including stage progression, timing calculations, and word statistics.

File Location and Store Architecture

Primary Store File

The core implementation resides in app/core/stores/practice.ts. This file defines the PracticeState interface and creates the store using Vue's defineStore function. The store is exported as usePracticeStore, following Pinia's composition API conventions.

Module Exports

All core stores are aggregated in app/core/stores/index.ts, which re-exports the practice store alongside the base, runtime, and setting stores. This centralization allows components to import state management utilities from a single entry point.

Core State and Type Definitions

PracticeState Interface

The store's state object tracks critical practice metrics:

• stage – Current practice stage identifier
• spend – Time spent in the session
• newWordNumber – Counter for new words encountered
• timerPaused – Boolean flag for timer state
• segments – Array recording timing intervals as tuples [start, end]

Enum Definitions

The WordPracticeStage enum, defined in app/core/types/types.ts, provides the numeric stage constants used by the store. Configuration mappings such as WordPracticeStageNameMap and WordPracticeModeStageMap live in app/core/config/env.ts, translating stage numbers to human-readable labels.

Getters and Computed Properties

The practice store exposes computed properties for derived state:

• getStageName – Maps the current numeric stage to a readable string using the environment configuration maps
• nextStage – Calculates the subsequent stage based on the current practice mode retrieved from the setting store

Actions for Timer Control

Timer manipulation is handled through explicit actions rather than direct state mutation:

• pauseTimer(reason) – Records the pause reason and updates the timerPaused flag while finalizing the current time segment in the segments array
• resumeTimer() – Restarts the timer and initializes a new segment entry to track active practice time

Integration with the Settings Store

The practice store collaborates closely with the setting store (app/core/stores/setting.ts). It imports this dependency to determine the WordPracticeMode and retrieve configuration values that dictate stage sequences and practice flow.

Implementation Examples

// Example: Accessing the practice store in a component
import { usePracticeStore } from '@/app/core/stores/practice'

export default {
  setup() {
    const practice = usePracticeStore()

    // Read current stage name
    const stageName = practice.getStageName

    // Move to the next stage (if any)
    const next = practice.nextStage
    if (next) {
      practice.$patch({ stage: next })
    }

    // Pause the timer when user hides the tab
    const onHide = () => practice.pauseTimer('auto_visibility')
    // Resume when the tab becomes active again
    const onShow = () => practice.resumeTimer()

    return { practice, stageName, onHide, onShow }
  }
}

// Example: Using the timer segment data to compute total active time
import { usePracticeStore } from '@/app/core/stores/practice'

function computeActiveTime() {
  const store = usePracticeStore()
  // Sum each segment's duration (end - start)
  return store.segments.reduce((total, [start, end]) => total + (end - start), 0)
}

// Example: Resetting practice statistics when starting a new session
import { usePracticeStore } from '@/app/core/stores/practice'

function resetPractice() {
  const practice = usePracticeStore()
  practice.$reset()               // clears all state to defaults
  practice.startDate = Date.now() // begin a fresh session
  practice.segments = []          // ensure timer segments are empty
}

Summary

• The practice Pinia store at app/core/stores/practice.ts centralizes word-practice state management in TypeWords
• State includes practice stages, timer segments, and word counters with a complete TypeScript interface
• Getter methods like getStageName and nextStage provide computed access to stage information
• Timer actions pauseTimer() and resumeTimer() manage practice timing through the segments array
• The store integrates with the setting store to determine practice modes and stage sequences
• Components access the store via usePracticeStore() imported from the core stores index

Frequently Asked Questions

Where is the Pinia store file located in the TypeWords repository?

The word-practice Pinia store is located at app/core/stores/practice.ts according to the TypeWords source code. This file contains the defineStore implementation, the PracticeState interface, and all associated getters and actions for managing practice sessions.

How does the practice store track typing session timing?

The store maintains a segments array that records timing intervals as tuples of [start, end] timestamps. The pauseTimer() and resumeTimer() actions manipulate these segments to calculate total active practice time excluding pauses.

What is the relationship between the practice store and the setting store?

The practice store imports and uses the setting store (app/core/stores/setting.ts) to determine the current WordPracticeMode and retrieve configuration values. This dependency allows the practice store to calculate the nextStage getter based on user-defined practice preferences.

How do I reset the practice state to start a new session?

Call practice.$reset() to restore all state fields to their default values, then set practice.startDate = Date.now() and clear practice.segments = [] to initialize a fresh timing session.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}