# Where Are Pinia Stores Located in the Escrcpy Project?

> Discover where Pinia stores are located in the escrcpy project. Find Pinia store modules organized within the desktop/src/store/ directory for clear structure.

- Repository: [viarotel-org/escrcpy](https://github.com/viarotel-org/escrcpy)
- Tags: internals
- Published: 2026-09-10

---

**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`](https://github.com/viarotel-org/escrcpy/blob/main/index.js) entry point.

### Device Store ([`desktop/src/store/device/index.js`](https://github.com/viarotel-org/escrcpy/blob/main/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.

```javascript
// 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`](https://github.com/viarotel-org/escrcpy/blob/main/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.

```javascript
// 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`](https://github.com/viarotel-org/escrcpy/blob/main/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`](https://github.com/viarotel-org/escrcpy/blob/main/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.

```javascript
// 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`](https://github.com/viarotel-org/escrcpy/blob/main/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`](https://github.com/viarotel-org/escrcpy/blob/main/desktop/src/store/device/index.js) handles Android device lists and configuration.
- **Theming**: [`desktop/src/store/theme/index.js`](https://github.com/viarotel-org/escrcpy/blob/main/desktop/src/store/theme/index.js) manages light/dark/system modes with main-process synchronization.
- **Scrcpy Settings**: [`desktop/src/store/preference/index.js`](https://github.com/viarotel-org/escrcpy/blob/main/desktop/src/store/preference/index.js) contains command-line argument builders for mirroring sessions.
- **UI State**: [`desktop/src/store/control/index.js`](https://github.com/viarotel-org/escrcpy/blob/main/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`](https://github.com/viarotel-org/escrcpy/blob/main/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`](https://github.com/viarotel-org/escrcpy/blob/main/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.