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,10 +57,11 @@ 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([])
+let list0 = ref([])
 
-let list=ref([])
+let list = ref([])
 
 let componentsList = [];
 const store = useSchemeStore();
@@ -108,7 +97,7 @@ store.$onAction(
        onError, // action 抛出或拒绝的钩子
      }) => {
       after((result) => {
-        console.log(`store action-${name}回调后：`+result);
+        console.log(`store action-${name}回调后：` + result);
       })
       // 如果 action 抛出或返回一个拒绝的 promise，这将触发
       onError((error) => {
@@ -129,21 +118,21 @@ const initScheme = () => {
 onMounted(() => {
   list0.value.push(
       {
-        "id":123,
+        "id": 123,
-        "name":"www"
+        "name": "www"
       },
       {
-        "id":125,
+        "id": 125,
-        "name":"rrr"
+        "name": "rrr"
       }
   );
-  list.value=[]
+  list.value = []
   initScheme();
   // @ts-ignore
 });
 
-function clone (element: Record<'name' | 'id'|'type'|'props'|'class'|'text'|'style'|'slots', IComponent>) {
+function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots', IComponent>) {
-  console.log("clone",element)
+  console.log("clone", element)
   return {
     id: `${element.type}-${uuid()}`,
     name: element.name,
@@ -161,21 +150,22 @@ function clone (element: Record<'name' | 'id'|'type'|'props'|'class'|'text'|'sty
     loop: {},
   };
 }
-const onEnd = (event:DraggableEvent) => {
+
-  console.log("onEnd",event)
+const onEnd = (event: DraggableEvent) => {
+  console.log("onEnd", event)
   // const {oldDraggableIndex} = obj;
   // store.previewData(store.component[oldDraggableIndex]);
   // store.nowComponentsData(store.component[oldDraggableIndex]);
 };
 
 const onStart = function (event) {
-  console.log("onStart",event)
+  console.log("onStart", event)
 }
 const onPreviewStart = function (event) {
-  console.log("onPreviewStart",event)
+  console.log("onPreviewStart", event)
 }
 const onPreviewUpdate = function (event) {
-  console.log("onPreviewUpdate",event)
+  console.log("onPreviewUpdate", event)
 }
 
 const onPreviewStop = function (event) {

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: {}
+    }),
+    actions:
+        {
+            initPreviewScheme(value) {
+                this.previewScheme = value
+                this.nowComponentsData = value[0]
+            },
+            initComponents(value) {
+                this.components = value
+            },
+            getSchemeObj(id) {
+                return findObjectById(this.previewScheme, id)
+            },
+            updateScheme() {
 
-    function initPreviewScheme(value) {
+            }
-        previewScheme.value = value
-        nowComponentsData.value=value[0]
-    }
 
-
+        }
-    function initComponents(value:IPageComponent[]) {
-        components.value = value
-    }
-
-    function getSchemeObj(id) {
-        return findObjectById(previewScheme.value, id)
-    }
-
-    function updateScheme() {
-
-    }
-
-    return {previewScheme, components, nowComponentsData, initComponents, initPreviewScheme, getSchemeObj, updateScheme}
 })