123

src/store/modules/detail.js

@@ -9,10 +9,18 @@ export const useDetailStore = defineStore({
       hardwareExampleId: '1',
       hardware_id: '1',
       showRecruitDetail: false,
+      componentKey_case: 0,
+      componentKey_hardware: 0,
     }
   },
   // actions
   actions: {
+    changeComponentKeyCase() {
+      this.componentKey_case++
+    },
+    changeComponentKeyHardware() {
+      this.componentKey_hardware++
+    },
     changeRecruitDetail(flag) {
       this.showRecruitDetail = flag
     },

src/views/Index/components/CaseDetails/index.vue

@@ -16,7 +16,10 @@
                   }}
                 </p>
               </div>
-              <div class="case_swiper_wrap" :key="componentKey">
+              <div
+                class="case_swiper_wrap"
+                :key="detailStore.componentKey_case"
+              >
                 <swiper
                   :pagination="pagination"
                   :modules="modules"
@@ -40,7 +43,7 @@
                 class="right_detail"
                 v-on:mouseover="mouseover"
                 v-on:mouseleave="mouseleave"
-                :key="componentKey"
+                :key="detailStore.componentKey_case"
               >
                 <div class="detail_header">
                   <div>详情页</div>
@@ -128,12 +131,11 @@ const modules = ref([Pagination])
 const detailStore = useDetailStore()
 const swiperStore = useSwiperStore()
 const { industry_id, example_id } = storeToRefs(detailStore)
-const componentKey = ref(0)
 const pagination = {
   clickable: true,
 }
 const forceRerender = () => {
-  componentKey.value = 1 + componentKey.value
+  detailStore.changeComponentKeyCase()
 }
 const funcToSon = () => {
   forceRerender()

src/views/Index/components/HardwareDetails/index.vue

@@ -16,7 +16,10 @@
                   }}
                 </p>
               </div>
-              <div class="case_swiper_wrap" :key="componentKey">
+              <div
+                class="case_swiper_wrap"
+                :key="detailStore.componentKey_hardware"
+              >
                 <swiper
                   :pagination="pagination"
                   :modules="modules"
@@ -40,7 +43,7 @@
                 class="right_detail"
                 v-on:mouseover="mouseover"
                 v-on:mouseleave="mouseleave"
-                :key="componentKey"
+                :key="detailStore.componentKey_hardware"
               >
                 <div class="detail_header">
                   <div>详情页</div>
@@ -129,9 +132,8 @@ const modules = ref([Pagination])
 const detailStore = useDetailStore()
 const swiperStore = useSwiperStore()
 const { hardware_id, hardwareExampleId } = storeToRefs(detailStore)
-const componentKey = ref(0)
 const forceRerender = () => {
-  componentKey.value = 1 + componentKey.value
+  detailStore.changeComponentKeyHardware()
 }
 const pagination = {
   clickable: true,