数据获取完成

README.md

@@ -27,6 +27,6 @@ If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has a
 
 # 环境运行
 npm run dev 无法获取接口数据
-npm run dev:ssr 运行本地文件
-npm run prod:ssr 运行打包文件
+npm run dev:ssr 开发环境服务端渲染
+npm run prod:ssr 生产环境服务端渲染
 node server   默认prod模式  开发环境进行服务端渲染

index.html

@@ -12,7 +12,7 @@
     <div id="app"><!--ssr-outlet--></div>
     <script type="module" src="/src/entry-client.ts"></script>
     <script>
-        window.__INITIAL_STATE__ = '<!--vuex-state-->' 
+        // window.__INITIAL_STATE__ = '<!--vuex-state-->' 
     </script>
 </body>
 

server.js

@@ -5,9 +5,7 @@ import express from 'express'
 import serverStatic from 'serve-static'
 import { createServer as createViteServer } from 'vite'
 import ssrManifest from './dist/client/.vite/ssr-manifest.json' assert { type: "json" }
-// process.env.NODE_ENV = "production"
 const isProd = process.env.NODE_ENV  === 'production'
-// console.log(123456,process.env.NODE_ENV)
 // const isProd = true
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 async function createServer() {
@@ -63,7 +61,8 @@ async function createServer() {
                     path.resolve(__dirname, 'dist/client/index.html'),
                     'utf-8',
                 )
-                render  = (await vite.ssrLoadModule('/src/entry-server.ts')).render
+                import *  as PRODserver from './dist/server/entry-server.js'
+                render  = PRODserver.render
             }
             // 4. 渲染应用的 HTML。这假设 entry-server.js 导出的 `render`
             //    函数调用了适当的 SSR 框架 API。

src/App.vue

@@ -1,17 +1,9 @@
 <script setup lang="ts">
-import headerCommon from '@/components/layout/header.vue'
-// import footerCommon from '@/components/layout/footer.vue'
 </script>
-
 <template>
-  <!-- {{ store.state.count }}
-  <button type="button" @click="setmutation">mutation</button>
-  <button type="button" @click="setaction">action</button> -->
-    <headerCommon />
-    <!-- <footerCommon /> -->
+  <router-link to="/home">home</router-link>
     <router-view />
 </template>
-
 <style >
 @import "@/assets/styles/common/bootstrap.min.css";
 @import "@/assets/styles/common/meanmenu.min.css";

src/components/layout/footer.vue

@@ -1,16 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-// import indexedDb from '../../utils/indexedDb'
-const menuList:any = ref([])//菜单列表
-
-menuList.value = 1
-// const uskyDb = new indexedDb("uskyDb") //创建或连接DB数据库
-// uskyDb.openStore("menu","id",['list'])//打开数据库menu
-// setTimeout(()=>{
-//     uskyDb.getItem('menu',1).then((res:any)=>{
-//         menuList.value = res.list
-//     })
-// },50)
+import { useStore  } from 'vuex'
+const store = useStore()
 </script>
 <template>
     <footer>
@@ -23,7 +13,7 @@ menuList.value = 1
                             <span style="text-align: left;color:#fff;margin-top:10px ">微信公众号</span>
                         </div>
                     </div>
-                    <div class="footerNone" :style="{'width':(.8/menuList.length*100)+'%' }"  v-for="item in menuList" :key="item.id">
+                    <div class="footerNone" :style="{'width':(.8/store.state.menuList.length*100)+'%' }"  v-for="item in store.state.menuList" :key="item.id">
                         <div class="widget nav-widget d-flex justify-content-center ">
                             <div>
 

src/components/layout/header.vue

@@ -7,11 +7,10 @@ export default defineComponent({
     setup(){
         const store = useStore()
         const currentone = ref("")
-        const menuList:any = ref([])//菜单列表
-        // menuList.value = store.state.menuList
         return { store,currentone }
     },
     asyncData({store, route}:any){
+        console.log(111)
         return store.dispatch('getMenuList')
     }
 })
@@ -19,7 +18,7 @@ export default defineComponent({
 
 </script>
 <template>
-    dasj
+    {{ store.state.menuList }}
         <header class="header-absolute sticky-header">
             <div class="custom-container-one">
                 <div class="mainmenu-area  d-flex align-items-center justify-content-center">

src/entry-client.ts

@@ -10,8 +10,10 @@ if(window.__INITIAL_STATE__){
 //     })
 // })
 router.isReady().then(() => {
+    console.log(77)
     //比较to、from不同时执行数据预取
     router.beforeResolve((to,from,next)=>{
+        console.log("跳转")
         let toComponent = router.resolve(to).matched.flatMap(record=>Object.values(record.components))
         let fromComponent = router.resolve(from).matched.flatMap(record=>Object.values(record.components))
         let actived = toComponent.filter((c,i)=>{
@@ -32,5 +34,17 @@ router.isReady().then(() => {
             next()
         })
     })
+    //页面刷新
+    const matchedComponents = router.currentRoute.value.matched.flatMap(record =>Object.values(record.components))
+    //对所有匹配的路由组件调用`asyncData()
+    Promise.all(matchedComponents.map((Component:any) =>{
+        console.log("刷新")
+        if(Component.asyncData){
+            return Component.asyncData({
+                store,
+                route: router.currentRoute
+            })
+        }
+    }))
     app.mount('#app')
 })

src/store/index.ts

@@ -30,6 +30,7 @@ export const store = createStore({
         getMenuList({ commit }){
             return new Promise(resolve=>{
                 getMenu().then((res:any)=>{
+                    console.log(res)
                     commit('setMenuList',res.data)
                     resolve(true)
                 })

src/views/home/homeIndex.vue

@@ -1,29 +1,8 @@
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-import { useStore  } from 'vuex'
-import uskylogo from '@/assets/img/logo.png'
-export default defineComponent({
-    setup(){
-        const store = useStore()
-        const img = uskylogo
-        return { store, img }
-        // const currentone:any= ref("") //当前页
-        
-        // currentone.value = "/"
-        //     setTimeout(()=>{
-        //     let a = store.state
-        //         console.log(1,a)
-        // },3000)
-    },
-    asyncData({store, route} :any){
-        return store.dispatch('getMenuList')
-    }
-})
+<script setup lang="ts">
+
 </script>
 <template>
-        <!-- {{ store.state }} -->
 
 </template>
 <style lang="scss" scoped>
-
 </style>