0

ページのコンテンツとナビゲーションが API から取得される静的 Web サイトを作成することで、nuxtjs SSG 機能を活用しようとしています。

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, null, 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 に対して 1 つのリクエストのみを行い、すべてを vuex に保存してから、そのデータをコンポーネントとページで使用することでした。

もっとうまくやる方法があるか、nuxtServerInit()アクションを完全に把握していないかのどちらかです。私は立ち往生していて、この問題を解決する方法がわからず、別の解決策が見えません。

ここまでお時間をいただきありがとうございました。

4

1 に答える 1