模拟加载数据

src/views/pptScreen/pptScreen.vue

@@ -1,11 +1,37 @@
 <template>
   <div class="pptScreen">
-    <Screen />
+    <Screen v-if="!initLoading" />
   </div>
 </template>
 
 <script setup lang="ts">
 import Screen from "../Screen/index.vue"
+import Axios from "axios"
+import { ref } from "vue"
+import { useSlidesStore } from "@/store"
+
+const slidesStore = useSlidesStore()
+
+const initLoading = ref(true)
+
+Axios.get("json.json")
+  .then(res => {
+    if (res.status === 200 && typeof res.data === "object") {
+      const { title, width, height, theme, slides } = res.data
+      console.log(res.data)
+      slidesStore.setTitle(title)
+      slidesStore.setViewportSize(width)
+      slidesStore.setViewportRatio(height / width)
+      slidesStore.setTheme(theme)
+      slidesStore.setSlides(slides)
+      initLoading.value = false
+    } else {
+      console.log(res)
+    }
+  })
+  .catch(err => {
+    console.log(err)
+  })
 </script>
 
 <style lang="scss" scoped>