Where Are Pinia Stores Located in the Escrcpy Project?

All Pinia stores in the escrcpy project live under the desktop/src/store/ directory, with each functional domain (devices, themes, preferences, and controls) implemented as a modular defineStore export aggregated through a central barrel file.

The escrcpy application is an Electron-based desktop tool for controlling Android devices, built with Vue.js and Pinia for reactive state management. Locating the Pinia stores in escrcpy is straightforward once you understand the modular architecture used to separate device management, UI theming, and Scrcpy configuration concerns.

Pinia Store Directory Structure

State management logic is centralized in desktop/src/store/, following a domain-driven folder pattern where each store resides in its own subdirectory with an index.js entry point.

Device Store (desktop/src/store/device/index.js)

The Device Store manages the list of connected Android devices, their individual configurations, and label generation logic. It exports the useDeviceStore composable, which provides methods like getList() to refresh connected devices.

// Example: accessing connected devices
import { useDeviceStore } from '@/store/device'

export default {
  setup() {
    const deviceStore = useDeviceStore()
    
    onMounted(() => {
      deviceStore.getList() // Load devices on component mount
    })
    
    return { deviceStore }
  }
}

Theme Store (desktop/src/store/theme/index.js)

The Theme Store controls the application’s visual appearance, supporting light, dark, or system modes. It synchronizes the selected theme with the Electron main process and updates the HTML class list accordingly. The store exposes an init() method to apply theme changes.

// Example: toggling between light and dark modes
import { useThemeStore } from '@/store/theme'

export default {
  setup() {
    const themeStore = useThemeStore()
    
    function toggleTheme() {
      const newTheme = themeStore.value === 'dark' ? 'light' : 'dark'
      themeStore.init(newTheme) // Updates HTML class & persists choice
    }
    
    return { themeStore, toggleTheme }
  }
}

Preference Store (desktop/src/store/preference/index.js)

The Preference Store holds all Scrcpy-related user settings, supporting both global and device-scoped configurations. It includes utility methods for building Scrcpy command-line arguments based on stored preferences, making it critical for the core mirroring functionality.

Control Store (desktop/src/store/control/index.js)

The Control Store manages the layout state of the control bar interface. It tracks the barLayout configuration and uses a swapyKey property to detect and react to layout changes. The store provides setBarLayout() to persist UI arrangements.

// Example: saving custom control bar arrangements
import { useControlStore } from '@/store/control'

export default {
  setup() {
    const controlStore = useControlStore()
    
    function saveLayout(layout) {
      controlStore.setBarLayout(layout)
    }
    
    return { controlStore, saveLayout }
  }
}

Root Store Export (desktop/src/store/index.js)

The Root Store file acts as a barrel export, re-exporting all individual stores to provide a clean import API for the rest of the application. This pattern allows components to import from @/store/ while keeping individual store logic isolated in subdirectories.

Electron Integration and the Preload Bridge

Unlike standard web applications, escrcpy’s Pinia stores interact with the Electron main process through a preload bridge. The stores are accessible via window.$preload.store in the renderer process, enabling secure communication between the Vue frontend and native OS features. The Theme Store specifically leverages this bridge to sync system theme preferences with the main process, ensuring the window chrome matches the selected UI mode.

Summary

• Primary Location: All stores reside in desktop/src/store/ with individual subdirectories for each domain.
• Device Management: desktop/src/store/device/index.js handles Android device lists and configuration.
• Theming: desktop/src/store/theme/index.js manages light/dark/system modes with main-process synchronization.
• Scrcpy Settings: desktop/src/store/preference/index.js contains command-line argument builders for mirroring sessions.
• UI State: desktop/src/store/control/index.js tracks control bar layouts using the swapyKey mechanism.
• Access Pattern: Import individual stores from @/store/ or access via window.$preload.store for Electron integration.

Frequently Asked Questions

Where are Pinia stores located in the escrcpy codebase?

All Pinia stores are located under the desktop/src/store/ directory. Each store is implemented in its own subdirectory (such as device/, theme/, preference/, and control/) containing an index.js file that defines the store using defineStore from Pinia.

How do I import and use the device store in a Vue component?

Import the useDeviceStore composable from @/store/device and invoke it within your component's setup() function. The store provides reactive state and methods like getList() to fetch connected Android devices.

Does escrcpy use a central store export file?

Yes, the project uses a barrel pattern at desktop/src/store/index.js that re-exports all individual stores. This allows components to import multiple stores from a single path while maintaining clean separation of concerns in the file structure.

How do Pinia stores communicate with Electron's main process?

The stores communicate through the $preload bridge exposed at window.$preload.store in the renderer process. This pattern is used by the Theme Store to synchronize UI theme settings with the native operating system and by other stores to persist state across the Electron context.

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