vue3项目之路由跳转时 vuex 数据预取

路由跳转时 vuex 数据预取

当第二次改造完成后，我们发现必须页面刷新才能使服务端获取到 vuex 里的动态数据。这一章讲解如何在路由跳转时服务端也能实现 vuex 数据预取

entry-client.ts

只需要添加一个 router.beforeResolve 实现每次进入路由前调用 asyncData 函数预取数据即可

router.beforeEach(async function () {
    
    
	...

    router.beforeResolve((to, from, next) => {
    
    
        const toComponents = router.resolve(to).matched.flatMap(record =>
            Object.values(record.components)
        )
        const fromComponents = router.resolve(from).matched.flatMap(record =>
            Object.values(record.components)
        )

        const actived = toComponents.filter((c, i) => {
    
    
            return fromComponents[i] !== c
        })

        if (!actived.length) {
    
    
            return next()
        }

        // 可以添加loading（不过会和其他请求冲突，所以算了）

        Promise.all(actived.map(function(Component) {
    
    
            if (Component.asyncData) {
    
    

                // 这里的参数必须和服务端渲染的中的一致！！
                return Component.asyncData({
    
     store, route: router.currentRoute })
            }
        })).then(function() {
    
    

            // 结束loading
            next()
        })
    })

}) 

router.currentRoute内部的value 和 router.currentRoute.value 不一样，大bug！

插件介绍： vuex-router-sync

这个插件作用是将当前路由数据 route 同步到 vuex 中

下载：npm i vuex-router-sync 需要低版本的 nodejs

nvm use 12.20.0

安装完之后，启动服务又报了一个错

需要再执行这个命令node node_modules/esbuild/install.js

main.ts

import {
    
     sync } from 'vuex-router-sync'

export function createApp() {
    
    
	...
    
    sync(store, router)
}