fix:store数据绑定

preview/views/MainView.vue

@@ -11,7 +11,7 @@
       <div class="left">
         <div class="title">组件</div>
         <VueDraggable
-            v-model="list0"
+            v-model="store.components"
             :animation="150"
             :group="{ name: 'designer', pull: 'clone', put: false }"
             :sort="false"
@@ -19,14 +19,14 @@
             @start="onStart"
             @end="onEnd"
         >
-          <div v-for="item in list0" :key="item.id" class="tem_btn">
+          <div v-for="item in store.components" :key="item.id" class="tem_btn">
             {{ item.name }}
           </div>
         </VueDraggable>
       </div>
       <div ref="targetContent" class="center">
         <VueDraggable
-            v-model="list"
+            v-model="store.previewScheme"
             :sort="true"
             :animation="150"
             group="designer"
@@ -36,23 +36,11 @@
             @update="onPreviewUpdate"
             @stop="onPreviewStop"
         >
-          {{list}}
+          {{ store.previewScheme }}
-<!--          {{store.previewScheme}}-->
+
-<!--          <template v-for="item in store.previewScheme" :key="item.id">-->
+          <DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
-<!--            <component  :id="item.id" :is="item.type" v-bind="item.props"-->
+            {{ component.id }}
-<!--                       :class="item.class" :style="item.style">-->
+          </DynamicComponent>
-<!--              {{ item.text }}-->
-<!--&lt;!&ndash;              <template v-for="child in componentChildren" :key="child.id">&ndash;&gt;-->
-<!--&lt;!&ndash;                <DynamicComponent :component-data="child" />&ndash;&gt;-->
-<!--&lt;!&ndash;              </template>&ndash;&gt;-->
-<!--&lt;!&ndash;              <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>&ndash;&gt;-->
-<!--&lt;!&ndash;                <DynamicComponent :component-data="slot" />&ndash;&gt;-->
-<!--&lt;!&ndash;              </template>&ndash;&gt;-->
-<!--            </component>-->
-<!--          </template>-->
-<!--          <DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">-->
-<!--            {{ component.id }}-->
-<!--          </DynamicComponent>-->
         </VueDraggable>
 
       </div>
@@ -69,6 +57,7 @@ import {uuid} from 'lsp-uuid';
 import {componentScheme} from "@/schemes/scheme";
 import {useSchemeStore} from '@/stores/useSchemeStore';
 import {IComponent} from "@/type/IComponent";
+import DynamicComponent from "@/components/DynamicComponent.vue";
 
 let list0 = ref([])
 
@@ -161,6 +150,7 @@ function clone (element: Record<'name' | 'id'|'type'|'props'|'class'|'text'|'sty
     loop: {},
   };
 }
+
 const onEnd = (event: DraggableEvent) => {
   console.log("onEnd", event)
   // const {oldDraggableIndex} = obj;

src/stores/useSchemeStore.ts

@@ -1,6 +1,5 @@
 import {defineStore} from 'pinia'
 import {IPageComponent} from '@/type/IPageComponent';
-import {ref} from 'vue';
 
 function findObjectById(obj, targetId) {
     if (Array.isArray(obj)) {
@@ -22,28 +21,27 @@ function findObjectById(obj, targetId) {
     return null; // 如果没有找到，则返回null
 }
 
-export const useSchemeStore = defineStore('scheme', () => {
+export const useSchemeStore = defineStore('scheme', {
-    const components = ref<IPageComponent[]>()
+    state: () => ({
-    const previewScheme = ref<IPageComponent[]>()
+        components: [],
-    const nowComponentsData = ref<IPageComponent>()
+        previewScheme: [],
-
+        nowComponentsData: {}
-    function initPreviewScheme(value) {
+    }),
-        previewScheme.value = value
+    actions:
-        nowComponentsData.value=value[0]
+        {
-    }
+            initPreviewScheme(value) {
-
+                this.previewScheme = value
-
+                this.nowComponentsData = value[0]
-    function initComponents(value:IPageComponent[]) {
+            },
-        components.value = value
+            initComponents(value) {
-    }
+                this.components = value
-
+            },
-    function getSchemeObj(id) {
+            getSchemeObj(id) {
-        return findObjectById(previewScheme.value, id)
+                return findObjectById(this.previewScheme, id)
-    }
+            },
-
+            updateScheme() {
-    function updateScheme() {
 
             }
 
-    return {previewScheme, components, nowComponentsData, initComponents, initPreviewScheme, getSchemeObj, updateScheme}
+        }
 })