如何在vuex商店中存储nuxtjs动态生成的路由

编程问答 2022-05-16

问题描述

我正在尝试通过创建一个静态网站来利用 nuxtjs SSG 功能，其中的页面内容和导航是从 API 获取的。

通过定义一个模块，我已经找到了如何动态生成路由的方法，在该模块中我使用 generate:before 钩子来获取页面内容和路由。创建路由时，我将页面内容存储为路由负载。下面的代码就是这样做的并且按预期工作。

modules/dynamicRoutesGenerator.js

const generator = function () {
  //Before hook to generate our custom routes
  this.nuxt.hook('generate:before',async (generator,generatorOptions) => {
    generator.generateRoutes(await generateDynamicRoutes())
  })
}

let generateDynamicRoutes = async function() {
  //...
  return routes
}

export default generator

现在我面临的问题是我有一些导航组件需要生成的路由，我想将它们存储到 vuex 存储中。

我尝试了 generate:done 钩子，但我不知道如何从那里获取 vuex 存储上下文。我最终使用的是 nuxtServerInit() 操作，因为如文档中所述：

If nuxt generate is ran,nuxtServerInit will be executed for every dynamic route generated.

这正是我所需要的，所以我正在尝试将它与以下代码一起使用：

store/index.js

export const actions = {
  nuxtServerInit (context,nuxtContext) {
    context.commit("dynamicRoutes/addRoute",nuxtContext)
  }
}

store/dynamicRoutes.js

export const state = () => ({
  navMenuNivel0: {}
})

export const mutations = {
  addRoute (state,{ ssrContext }) {
    //Ignore static generated routes
    if (!ssrContext.payload || !ssrContext.payload.enTrada) return
    //If we match this condition then it's a nivel0 route
    if (!ssrContext.payload.navMenuNivel0) {
      console.log(JSON.stringify(state.navMenuNivel0,null,2));
      //Store nivel0 route,we Could use url only but only _id is guaranteed to be unique
      state.navMenuNivel0[ssrContext.payload._id] =  {
        url: ssrContext.url,enTrada: ssrContext.payload.enTrada,navMenuNivel1: []
      }
      console.log(JSON.stringify(state.navMenuNivel0,2));
      //Nivel1 route
    } else { 
      //...
    }
  }
}

export const getters = {
  navMenuNivel0: state => state.navMenuNivel0
}

确实调用了该操作并且我获得了所有预期值，但是似乎每次调用 nuxtServerInit() 都会重置存储状态。我在控制台中打印了这些值（因为我不确定是否可以调试它），这就是它们的样子：

{}                                                                                                                                                                                                                     
{                                                                                                                                                                                                                      
  "5fc2f4f15a691a0fe8d6d7e5": {
    "url": "/A","enTrada": "A","navMenuNivel1": []
  }
}
{}                                                                                                                                                                                                                     
{                                                                                                                                                                                                                     
  "5fc2f5115a691a0fe8d6d7e6": {
    "url": "/B","enTrada": "B","navMenuNivel1": []
  }
}

我已经在这个主题上搜索了所有我能找到的东西，虽然我没有找到与我相似的例子，但我把我能找到的所有部分放在一起，这就是我想出的。

我的想法是只向 API 发出一个请求（在构建期间），将所有内容存储在 vuex 中，然后在组件和页面中使用该数据。

要么有更好的方法，要么我没有完全掌握 nuxtServerInit() 操作。我被卡住了，不知道如何解决这个问题，也看不到其他解决方案。

如果你做到了这一点，感谢你的时间！

解决方法

我想出了一个解决方案，但我觉得它不是很优雅。

这个想法是将 API 请求数据存储在一个静态文件中。然后创建一个插件，使其具有一个公开 API 数据和一些函数的 $staticAPI 对象。

我使用 build:before 钩子是因为它在 generate:before 和 builder:extendPlugins 之前运行，这意味着在路由生成或插件创建发生时，我们已经存储了 API 数据。

dynamicRoutesGenerator.js

const generator = function () {
  //Add hook before build to create our static API files
  this.nuxt.hook('build:before',async (plugins) => {
    //Fetch the routes and pages from API
    let navMenuRoutes = await APIService.fetchQuery(QueryService.navMenuRoutesQuery())
    let pages = await APIService.fetchQuery(QueryService.paginasQuery())
    //Cache the queries results into staticAPI file
    APIService.saveStaticAPIData("navMenuRoutes",navMenuRoutes)
    APIService.saveStaticAPIData("pages",pages)
  })
  
  //Before hook to generate our custom routes
  this.nuxt.hook('generate:before',async (generator,generatorOptions) => {
    console.log('generate:before')
    generator.generateRoutes(await generateDynamicRoutes())
  })
}

//Here I can't find a way to access via $staticAPI
let generateDynamicRoutes = async function() {
  let navMenuRoutes = APIService.getStaticAPIData("navMenuRoutes")
  //...
}

插件staticAPI.js：

import APIService from '../services/APIService'

let fetchPage = function(fetchUrl) {  
  return this.pages.find(p => { return p.url === fetchUrl})
}

export default async (context,inject) => {
  //Get routes and files from the files
  let navMenuRoutes = APIService.getStaticAPIData("navMenuRoutes")
  let pages = APIService.getStaticAPIData("pages")
  //Put the objects and functions in the $staticAPI property
  inject ('staticAPI',{ navMenuRoutes,pages,fetchPage })
}

用于将数据保存/加载到文件的 APIService 助手：

//...
let fs = require('fs');

let saveStaticAPIData = function (fileName = 'test',fileContent = '{}') {
  fs.writeFileSync("./static-api-data/" + fileName + ".json",JSON.stringify(fileContent,null,2));
}

let getStaticAPIData = function (fileName = '{}') {
  let staticData = {};

  try {
      staticData = require("../static-api-data/" + fileName + ".json");
  } catch (ex) {}

  return staticData;
}

module.exports = { fetchQuery,apiUrl,saveStaticAPIData,getStaticAPIData }

nuxt.config.js

build: {
  //Enable 'fs' module
  extend (config,{ isDev,isClient }) {
     config.node = { fs: 'empty' }
  }
},plugins: [
  { src: '~/plugins/staticAPI.js',mode: 'server' }
],buildModules: [
  '@nuxtjs/style-resources','@/modules/staticAPIGenerator','@/modules/dynamicRoutesGenerator'
]
javascriptnuxt.jsssgstatic-site-generation