nuxt 2.14 generate 不更新 asyncData

Question

我正在密切关注此功能 (https://nuxtjs.org/blog/nuxt-static-improvements/#generate-time-cache-vs-full-webpack-build)

我可能弄错了，但我希望澄清我是否可以正确使用此功能。

基本上，我想跳过文章中强调的 webpack 构建，并通过 nuxt generate 构建我的页面。问题是我的数据源通常会更改，但我的站点代码不会更改，我认为在 Nuxt 2.14 中使用 nuxt generate 将有助于我跳过 webpack 构建的用例。

然而，在运行 nuxt generate 命令跳过 webpack 构建并直接跳转到页面生成时，生成的页面似乎已更新（如预期的那样），但 asyncData 中的数据似乎没有正在更新/刷新。

nuxt.config.js

generate: {
    crawler: false,
    async routes() {
      let finalArray = readFinalArrayFromSomeDatabase();

      await fs.writeJson('static/data/index.json', finalArray); // writing new array to static folder

      generateSomeNewRoutes(finalArray); // working correctly!!!
    }
}

一些_slug.vue

async asyncData(params) {
    // this runs after previous code runs
    const testArray = require("../../../static/data/index.json"); // this is not updated!!!
}

写入的 index.json 已更新，但在 asyncData 中读取的 index.json 未更新。有什么方法可以触发 asyncData 的变化吗？或者这是否意味着当我的数据发生变化并且无法在 nuxt 2.14 中使用此功能时，我必须始终重建 webpack？

Answer 1

在您的asyncData 中，您正在使用require 加载 JSON，这会将 JSON 添加到 webpack 构建中，因此此后不会更新。

相反，您可以使用 payload 将数据传递给 asyncData。例如：

  generate: {
    crawler: false,
    async routes() {
      const finalArray = readFinalArrayFromSomeDatabase();

      return generateSomeNewRoutes(finalArray).map(route => ({ route, payload: finalArray }));
    }
}

然后在你的组件中：

async asyncData({ payload }) {
  if (payload) {
    // you can now access the entire finalArray via payload
    // though note this will only work at generate time and during dev
    // you should have another solution to fetch/require data differently
  }
}