Using Instance API

usePtah()

usePtah is a function used to get and manage the ptah instance, mainly used to create and manage the lifecycle of the ptah instance in Vue components. This function helps initialize and configure the low-code platform instance.

Parameters

• id: (Required) The unique identifier for the ptah instance, usually used to distinguish between different applications or pages. Each ptah instance requires a unique ID.
• isProd: (Optional) Specifies whether the current environment is a production environment. The default is false. If set to true, the instance will be configured for a production environment.
• schema: (Optional) Used to initialize the page data, usually a JSON object that contains the structure of the page or application. This parameter allows you to directly pass in initial data for page rendering.

Usage Example

Basic Usage

import { usePtah } from '@ptahjs/creative-vue';

const ptahInstance = usePtah({
    id: 've1', // Unique instance ID
    isProd: false // Set to development environment
    // schema: pageJson  // Optional, pass in page structure data
});

Using with <Provider> Component

In Vue, usePtah() must be used with the <Provider> component. The <Provider> component is used to receive and manage the ptah instance, ensuring that the instance can be used throughout the application.

<template>
    <!-- Pass the ptah instance to the Provider component -->
    <Provider :app="ptahInstance">
        <!-- Other components or content -->
    </Provider>
</template>

<script>
import { usePtah } from '@ptahjs/creative-vue';

// Create the ptah instance
const ptahInstance = usePtah({
    id: 'app-1',
    isProd: false // Development environment
    // schema: pageJson  // Initialize with data
});

// Simulate asynchronous data retrieval and update schema
setTimeout(() => {
    ptahInstance.schema(pageJson); // Update the page structure data
}, 3000);
</script>

Use Cases

• Application Initialization: usePtah allows you to provide each page or application instance with a unique ID and configuration, helping you manage multiple pages or applications.
• Environment Differentiation: The isProd parameter can automatically configure the instance for different environments, making it easy to switch between development and production configurations.
• Asynchronous Data Handling: You can asynchronously update the page content using the schema method, supporting dynamic loading and updating.

Notes

1. Unique ID: Ensure that each ptah instance has a unique id to avoid conflicts.
2. Provider Configuration: When creating a ptah instance using usePtah, it must be wrapped inside a <Provider> component, or it will not function correctly.
3. Asynchronous Data Updates: If you need to dynamically update the page structure, you can do so using the ptahInstance.schema() method to update asynchronously.