更新 swiper更新渲染逻辑

src/components/Swiper.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="swiper mySwiper">
     <div class="swiper-wrapper">
-      <div v-for="item in imgs" class="swiper-slide">
-        <img :src="item" alt="" />
+      <div v-for="item in this.$store.state.imgs" class="swiper-slide">
+        <img :src="item.url" alt="" />
       </div>
     </div>
     <div class="swiper-button-next"></div>
@@ -11,21 +11,13 @@
 </template>
 
 <script>
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, watch } from "vue";
 import { mapState } from "vuex";
 import exchangeUrl from "utils/exchangeUrl";
+import store from "store/index";
 
 export default {
-  props: {
-    imgs: {
-      type: Array,
-      default: [
-        // "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship2.jpg",
-        // "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship1.jpg",
-      ],
-    },
-  },
-  setup() {
+  setup(props) {
     let swiper = ref({});
     function init() {
       swiper.value = new Swiper(".mySwiper", {
@@ -36,12 +28,26 @@ export default {
       });
     }
 
+    watch(
+      () => store.state.imgs,
+      (a, b) => {
+        let t = setTimeout(() => {
+          update();
+        }, 50);
+      }
+    );
+    function update() {
+      console.log("update");
+      swiper.value.update();
+    }
+
     onMounted(() => {
       init();
     });
     return {
       init,
       exchangeUrl,
+      update,
     };
   },
 };

src/store/index.js

@@ -87,6 +87,14 @@ const store = createStore({
       shipStatus: 0,
     },
     numbers: [],
+    imgs: [
+      {
+        url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship2.jpg",
+      },
+      {
+        url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship1.jpg",
+      },
+    ],
   },
   mutations: {
     changeLogin(state, b) {
@@ -127,6 +135,9 @@ const store = createStore({
       state.shipInfo.data[1].text = data.shipLength;
       state.shipInfo.data[2].text = data.shipBreadth;
     },
+    setImgs(state, imgs) {
+      state.imgs = imgs;
+    },
   },
   actions: {
     Login({ commit }, userInfo) {

src/views/transportationSafetyCenter.vue

@@ -310,6 +310,33 @@ export default {
 
       bmap.value.addOverlay(polyline); //增加折线
       //   bmap.value.centerAndZoom(points[points.length - 1], 15); // params:(设置地图中心点,缩放级别)
+      let imgs = [
+        {
+          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship2.jpg",
+        },
+        {
+          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship1.jpg",
+        },
+        {
+          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship2.jpg",
+        },
+        {
+          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship1.jpg",
+        },
+        {
+          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship2.jpg",
+        },
+        {
+          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship1.jpg",
+        },
+        {
+          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship2.jpg",
+        },
+        {
+          url: "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship1.jpg",
+        },
+      ];
+      store.commit("setImgs", imgs);
     }
 
     async function getAllShipLocation() {