GxP Store

The GxP Store (gxpPortalConfigStore) is a Pinia store that provides reactive state management and platform integration for your plugin.

Importing the Store

import { useGxpStore } from '@gx-runtime/stores/gxpPortalConfigStore';

// In your component setup
const store = useGxpStore();

Store Sections

The store contains several reactive sections populated from your app-manifest.json and the platform:

Section	Description	Source
pluginVars	Plugin settings/configuration	settings in manifest
stringsList	Translatable strings	strings.default in manifest
assetList	Asset URLs	assets in manifest
triggerState	Dynamic runtime state	triggerState in manifest
dependencyList	External dependencies	Platform-injected
permissionFlags	Granted permissions	Platform-injected
theme	Platform theme colors	Platform-injected
router	Navigation methods	Platform-injected

Getter Methods

Use these methods to safely access store values with fallbacks:

getString(key, defaultValue)

Get a string from stringsList:

const title = store.getString('welcome_title', 'Welcome');
const button = store.getString('btn_submit', 'Submit');

getSetting(key, defaultValue)

Get a setting from pluginVars:

const color = store.getSetting('primary_color', '#000000');
const timeout = store.getSetting('idle_timeout', 30);
const enabled = store.getSetting('feature_enabled', false);

getAsset(key, defaultValue)

Get an asset URL from assetList:

const logo = store.getAsset('logo', '/fallback-logo.png');
const hero = store.getAsset('hero_image', '/placeholder.jpg');

getState(key, defaultValue)

Get a value from triggerState:

const step = store.getState('current_step', 1);
const isActive = store.getState('is_active', false);

hasPermission(permission)

Check if a permission is granted:

if (store.hasPermission('camera')) {
  // Camera access is available
}

if (store.hasPermission('bluetooth')) {
  // Bluetooth access is available
}

Update Methods

updateString(key, value)

Update a string value:

store.updateString('dynamic_message', 'Processing your request...');

updateSetting(key, value)

Update a setting value:

store.updateSetting('current_mode', 'advanced');

updateAsset(key, url)

Update an asset URL:

store.updateAsset('user_avatar', 'https://example.com/avatar.jpg');

updateState(key, value)

Update trigger state:

store.updateState('current_step', 2);
store.updateState('is_loading', true);
store.updateState('selected_item', { id: 123, name: 'Item' });

addDevAsset(key, filename)

Add a development asset with the dev server URL prefix:

// Automatically prefixes with dev server URL
store.addDevAsset('temp_image', 'screenshot.png');
// Result: https://localhost:3060/dev-assets/images/screenshot.png

Dependency API Client

The recommended way to make API calls is through the dependency system using callApi(). This method uses the operations defined in your app-manifest.json dependencies.

callApi(operationId, identifier, additionalData)

Call an API operation defined in your dependencies:

const store = useGxpStore();

// GET request - list resources
const items = await store.callApi('access-points.index', 'access_points');

// GET request - single resource (path parameter)
const item = await store.callApi('access-points.show', 'access_points', {
  access_point: 123  // Path parameter
});

// POST request - create resource
const newItem = await store.callApi('access-points.store', 'access_points', {
  name: 'Main Entrance',
  location: 'Building A'
});

// PUT request - update resource
const updated = await store.callApi('access-points.update', 'access_points', {
  access_point: 123,  // Path parameter
  name: 'Updated Name' // Body data
});

// DELETE request
await store.callApi('access-points.destroy', 'access_points', {
  access_point: 123
});

Parameters:

Parameter	Type	Description
operationId	string	The operation key from your dependency's operations object
identifier	string	The dependency identifier from app-manifest.json
additionalData	object	Path parameters and/or request body data (optional)

Returns: response.data from the API response

How it works:

1. Looks up the dependency by identifier in dependencyList
2. Finds the operation by operationId in the dependency's operations
3. Parses the method and path from the operation value (e.g., "get:/v1/...")
4. Substitutes path parameters from additionalData (e.g., {access_point} → 123)
5. Makes the HTTP request with remaining data as query params (GET) or body (POST/PUT)
6. Returns response.data

Example with error handling:

try {
  const accessPoints = await store.callApi('access-points.index', 'access_points');
  console.log('Loaded', accessPoints.length, 'access points');
} catch (error) {
  console.error('Failed to load access points:', error.message);
}

Define Dependencies First

Before using callApi, make sure you've added the dependency to your app-manifest.json. Use gxdev add-dependency to generate the configuration automatically.

Low-Level API Client

For direct API calls without the dependency system, use these methods:

apiGet(endpoint, params)

const response = await store.apiGet('/events/123');
const events = await store.apiGet('/events', { status: 'active' });

apiPost(endpoint, data)

const result = await store.apiPost('/checkin', {
  attendee_id: 456,
  timestamp: new Date().toISOString()
});

apiPut(endpoint, data)

await store.apiPut('/attendees/456', {
  checked_in: true
});

apiDelete(endpoint)

await store.apiDelete('/sessions/789');

Socket.IO Integration

The store provides methods for real-time communication via Socket.IO:

emitSocket(channel, event, data)

Send a socket event:

store.emitSocket('primary', 'checkin-complete', {
  attendee_id: 123,
  badge_printed: true
});

listenSocket(channel, event, callback)

Listen for socket events:

store.listenSocket('primary', 'session-updated', (data) => {
  console.log('Session updated:', data);
  store.updateState('current_session', data);
});

useSocketListener(dependencyId, event, callback)

Set up a socket listener for a specific dependency:

store.useSocketListener('badge-printer', 'print-complete', (result) => {
  if (result.success) {
    store.updateState('badge_printing', false);
  }
});

Reactive Usage in Templates

The store is fully reactive. Use it directly in your templates:

<template>
  <div :style="{ backgroundColor: store.getSetting('bg_color', '#fff') }">
    <h1>{{ store.getString('title', 'Default Title') }}</h1>

    <p v-if="store.triggerState.is_loading">Loading...</p>

    <div v-for="item in store.triggerState.items" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup>
import { useGxpStore } from '@gx-runtime/stores/gxpPortalConfigStore';

const store = useGxpStore();
</script>

Watching Store Changes

Use Vue's watch to react to store changes:

import { watch } from 'vue';
import { useGxpStore } from '@gx-runtime/stores/gxpPortalConfigStore';

const store = useGxpStore();

// Watch a specific state value
watch(
  () => store.triggerState.current_step,
  (newStep, oldStep) => {
    console.log(`Step changed from ${oldStep} to ${newStep}`);
  }
);

// Watch multiple values
watch(
  () => [store.triggerState.is_active, store.pluginVars.mode],
  ([isActive, mode]) => {
    if (isActive && mode === 'kiosk') {
      startKioskMode();
    }
  }
);

Computed Properties

Create computed properties based on store values:

import { computed } from 'vue';
import { useGxpStore } from '@gx-runtime/stores/gxpPortalConfigStore';

const store = useGxpStore();

const isReady = computed(() =>
  !store.triggerState.is_loading &&
  store.triggerState.data !== null
);

const formattedCount = computed(() =>
  `${store.triggerState.checked_in_count} of ${store.pluginVars.total_expected}`
);

Theme Integration

Access platform theme values:

const store = useGxpStore();

// Theme colors
const primaryColor = store.theme?.primary || '#1976D2';
const backgroundColor = store.theme?.background || '#ffffff';

// Use in styles
const buttonStyle = computed(() => ({
  backgroundColor: store.theme?.primary,
  color: store.theme?.onPrimary
}));

Best Practices

1. Use getters with defaults - Always provide fallback values
2. Keep state updates atomic - Update one value at a time when possible
3. Use computed for derived state - Don't duplicate logic
4. Clean up listeners - Remove socket listeners when components unmount
5. Avoid deep nesting - Keep triggerState relatively flat for reactivity