在组件中访问 Runtime 实例

inject(PTAH_INSTANCE)

PtahJs 会在 <DesignerRoot> 和 <Preview> 内通过 Vue 的依赖注入提供 runtime。

import { inject } from 'vue';
import { PTAH_INSTANCE } from '@ptahjs/ui-vue';

const app = inject(PTAH_INSTANCE);

---

useRuntimeApp()

用于创建预览或运行模式下的 Runtime 实例。

const runtime = useRuntimeApp({ id: 've1' });

---

useDesignerApp()

用于创建设计器模式下的 Runtime 实例，并附带 runtime.designer。

const runtime = useDesignerApp({ id: 've1' });
const designer = runtime.designer;

---

访问 app.$state

<script setup>
import { inject, computed } from 'vue';
import { PTAH_INSTANCE } from '@ptahjs/ui-vue';

const app = inject(PTAH_INSTANCE);
const currentScene = computed(() => app.$state.currentScene);
</script>

常用状态键

Key	说明
scenesById	场景映射
modulesById	模块映射
eventsById	事件映射
childrenIdsByParentId	父子关系映射
sceneIdOrder	场景顺序
currentSceneId	当前场景 ID
currentModuleId	当前模块 ID
currentScene	当前场景
currentModule	当前模块