添加订阅事件监听

src/components/DynamicComponent.vue

@@ -13,7 +13,9 @@
 <script setup lang="ts">
 import { defineProps, computed, onMounted } from 'vue';
 import { componentMapping } from './componentMapping';
+import { useSchemeStore } from '../stores/useSchemeStore'
 
+const store = useSchemeStore()
 const props = defineProps({
   componentData: Object
 });
@@ -31,11 +33,16 @@ const componentClass = computed(() => props.componentData?.class || []);
 const componentStyle = computed(() => props.componentData?.style || []);
 const componentSlots = computed(() => props.componentData?.slots || []);
 
-const updateScheme=()=>{
-  
+// @ts-ignore
+const updateScheme = () => {
+
+}
+
+const getCurrentSchemeObj = () => {
+  return store.getSchemeObj(componentId.value)
 }
 const handleClick = () => {
-  console.log(`Div with id ${componentId.value} was clicked.`);
+  console.log(`Div with id ${JSON.stringify(getCurrentSchemeObj())} was clicked.`);
   // 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
 };
 </script>

src/components/MainView.vue

@@ -23,6 +23,9 @@
         </a-col>
         <a-col flex="20%">
           <div class="property-editor">属性编辑器</div>
+          <div>
+            {{ store.scheme }}
+          </div>
         </a-col>
       </a-row>
 
@@ -36,14 +39,12 @@
       <!-- 测试区域 -->
       <div class="test-area">
         {{ store.scheme }}
-        <!-- <TestComponent></TestComponent> -->
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import TestComponent from './TestComponent.vue';
 import { onMounted, ref } from 'vue';
 import NestedFunction from './NestedFunction.vue';
 import DynamicComponent from './DynamicComponent.vue';
@@ -70,7 +71,7 @@ const baseScheme =
   "slots": {},
   "header": {},
   "footer": {},
-  "children": {},
+  "children": [],
   "meta": {}
 }
 const componentsList = ref<any[]>([]);
@@ -78,11 +79,47 @@ const list = ref<IPageComponent[]>([]);
 const el2 = ref();
 const store = useSchemeStore()
 
+//初始化scheme
 const initScheme = () => {
-
-  store.initScheme(baseScheme)
+  store.initScheme([baseScheme])
 }
 
+const unsubscribe = store.$onAction(
+  ({
+    name, // action 名称
+    store, // store 实例，类似 `someStore`
+    args, // 传递给 action 的参数数组
+    after, // 在 action 返回或解决后的钩子
+    onError, // action 抛出或拒绝的钩子
+  }) => {
+    // 为这个特定的 action 调用提供一个共享变量
+    const startTime = Date.now()
+    // 这将在执行 "store "的 action 之前触发。
+    console.log(`Start "${name}" with params [${args.join(', ')}].`)
+
+    // 这将在 action 成功并完全运行后触发。
+    // 它等待着任何返回的 promise
+    after((result) => {
+      console.log(
+        `Finished "${name}" after ${
+          Date.now() - startTime
+        }ms.\nResult: ${JSON.stringify(result) }.`
+      )
+    })
+
+    // 如果 action 抛出或返回一个拒绝的 promise，这将触发
+    onError((error) => {
+      console.warn(
+        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
+      )
+    })
+  }
+)
+
+// 手动删除监听器
+// unsubscribe()
+
+
 onMounted(() => {
   const loadedComponents = Object.values(componentScheme);
   componentsList.value = loadedComponents;

src/components/NestedFunction.vue

@@ -35,14 +35,14 @@ useDraggable(el, list, {
     console.log('start')
   },
   onUpdate() {
-    console.log('update list1')
+    console.log('update list')
   },
   onAdd: () => {
     // console.log(e)
-    console.log('add list1')
+    console.log('add list')
   },
   onRemove: () => {
-    console.log('remove list1')
+    console.log('remove list')
   }
 },)
 </script>