修修补补

修修补补

Author: Cksheuen

src/components/Detail.vue

@@ -18,15 +18,16 @@
                 <div class="content" v-if="item != 'images' && item != 'thumbnail' && !editState">
                     {{ controlData.data[controlData.detaiIndex]![item] }}
                 </div>
-                <img v-else-if="item != 'thumbnail' && !editState" :src="controlData.data[controlData.detaiIndex]?.images[0]"
+                <img v-else-if="item != 'thumbnail' && !editState"
+                    :src="controlData.data[controlData.detaiIndex]?.images[0]"
                     :alt="controlData.data[controlData.detaiIndex]?.title">
             </el-descriptions-item>
         </el-descriptions>
     </el-drawer>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { ElButton, ElDrawer } from 'element-plus'
 import { useControlData } from '@/stores/useControlData';
 
@@ -48,7 +49,7 @@ const saveNewVal = () => {
     for (let i = 0; i < domArr.length; i++)
         controlData.editItem(i, (domArr[i] as HTMLInputElement).value)
     console.log(controlData);
-    
+
     changeEditState()
 }
 </script>

src/components/Table.vue

@@ -31,16 +31,15 @@ const js = await res.json();
 
 <script setup lang='ts'>
 import DeleteBut from './DeleteBut.vue'
-import { ref, reactive, computed } from 'vue'
+import { ref, computed } from 'vue'
 import { useControlData } from '@/stores/useControlData';
 
-
-let json = ref(js)
 let currentPage = ref(1)
 
 const controlData = useControlData()
-controlData.setNewVal(json.value.products)
-json.value = js.products
+controlData.setNewVal(js.products)
+
+let json = ref(controlData.data)
 
 controlData.$subscribe((mutation, state) => {
     json.value = controlData.data

src/main.ts

@@ -16,6 +16,4 @@ APP.use(router);
 APP.use(ElementPlus);
 APP.use(pinia);
 
-const whiteList = ['/'];
-
 APP.mount('#app');

src/shims-vue.d.ts

@@ -1,4 +1,4 @@
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { defineStore } from 'pinia';
 
 interface Data {

src/stores/useControlData.ts

@@ -2,34 +2,13 @@
     <div class="body">
         <div class="title">title</div>
         <Table></Table>
-        <Detail :visible="show" :data="data"></Detail>
+        <Detail></Detail>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, toRefs } from 'vue'
-import { useControlData } from '@/stores/useControlData';
 import Table from '@/components/Table.vue';
 import Detail from '@/components/Detail.vue';
-
-const controlData = useControlData()
-
-interface Data {
-    id: number;
-    title: string;
-    description: string;
-    price: number;
-    discountPercentage: number;
-    rating: number;
-    stock: number;
-    brand: string;
-    category: string;
-    thumbnail: string;
-    images: string[];
-}
-
-let data: Data
-let show = ref(false)
 </script>