NuxtJS SSG模式下如何将动态生成的路由存储到Vuex Store中

问题根因 #

nuxt generate 跑构建的时候，每生成一个静态路由，Nuxt都会起一套完全独立的应用运行环境，配一个全新的Vuex Store，各环境之间内存是完全隔离的，根本不存在跨路由的共享状态。这就是你日志里看到的情况：每次写完一个路由的导航数据，下一次触发nuxtServerInit的时候，又回到了空Store的状态——你根本没在同一个Store实例上累加数据，每存一次就换了个新的空Store。

你对SSG场景下的nuxtServerInit的理解有偏差：文档说它会为每个生成的动态路由执行是真的，但执行的载体是每个路由对应独立的Store实例，不是同一个Store反复跑这个方法，完全满足不了你累积路由数据的需求。

可落地的实现方案 #

整体思路完全绕开跨上下文同步状态的需求，在构建流程的最前期（还没开始生成静态页的时候）一次性拉取所有需要的导航、路由数据，通过Nuxt的全局公共配置把数据注入到所有运行上下文里，让每个生成的页面都能直接读取，完全不需要靠逐路由累积状态。

具体改造步骤 #

1. 调整现有自定义模块的逻辑，在generate:before阶段一次性拉取全量数据，整个构建流程只请求一次API：
   改造modules/dynamicRoutesGenerator.js：

   const generator = async function () {
     // 并行拉取所有动态路由规则、导航数据，全流程仅一次API请求
     const [dynamicRoutes, fullNavData] = await Promise.all([
       generateDynamicRoutes(),
       fetchAllNavDataFromApi() // 拉取全量导航层级数据
     ])
   
     // 把数据挂载到Nuxt的公共运行时配置，所有运行上下文都可以直接访问
     this.nuxt.options.publicRuntimeConfig = {
       ...this.nuxt.options.publicRuntimeConfig,
       fullNavData,
       dynamicRoutes
     }
   
     // 原有路由生成逻辑保持不变
     this.nuxt.hook('generate:before', (generator) => {
       generator.generateRoutes(dynamicRoutes)
     })
   }
   
   export default generator
   

2. 去掉原来逐路由往Store写数据的逻辑，调整Store的初始化逻辑，直接从公共配置读已经拉好的数据：
   改造store/index.js：

   export const actions = {
     nuxtServerInit ({ commit }, { $config }) {
       // 每个页面渲染时直接读公共配置的全量导航数据，不需要重复请求API
       if ($config.fullNavData) {
         commit('dynamicRoutes/setFullNavData', $config.fullNavData)
       }
     }
   }
   

   改造store/dynamicRoutes.js：

   export const state = () => ({
     navMenuNivel0: {}
   })
   
   export const mutations = {
     setFullNavData (state, navData) {
       // 直接整体赋值提前整理好的导航结构，不需要逐路由累积
       state.navMenuNivel0 = navData.level0Nodes
     }
   }
   
   export const getters = {
     navMenuNivel0: state => state.navMenuNivel0
   }
   

3. 导航组件保持原有写法，通过getter读取Store里的导航数据即可。

方案匹配度 #

• 完全满足“构建时仅一次API请求拉取全量数据”的核心诉求，没有重复请求开销
• 彻底避开了SSG场景下上下文隔离的坑，不存在状态无法跨路由传递的问题
• 不需要依赖拿不到上下文的generate:done钩子，所有数据准备工作在构建最开始的准备阶段就完成了

注意事项 #

• 不要尝试在generate生命周期的各个钩子之间靠共享内存同步Vuex状态，因为每个静态页面的渲染是完全沙箱化的独立上下文，内存互相隔离，写入的内容根本传递不到下一个路由的渲染流程中。
• 如果需要对路由做层级整理，可以在最开始拉取全量路由数据的时候就把导航结构组装完成再挂载到公共配置上，不要依赖逐路由累积状态的逻辑。

内容的提问来源于stack exchange，提问作者Bruno Tavares