Nuxt.js:管理静态生成的网站的CMS集合

Question

在nuxt generate上，我们需要从CMS获取所有集合。由于我们的网站是完全静态的，因此只需获取每个集合 1 次就足够了，然后将它们提供给所有路由。

我们遇到了问题，没有将我们所有的网站内容暴露给每条路线。

我们可以使用 vuex 来存储所有内容。但是，我们不希望客户可以使用包含我们所有网站内容的巨型商店对象。只有在构建过程中，服务器才应该有权访问它并将所需的内容传递给每个路由，例如。通过asyncData()(请记住，我们有一个静态生成的网站，因此永远不会从客户端调用asyncData()(。

示例：我们需要/blog上的blog集合，还需要/blog/:slug和/press上的集合。目前，我们单独获取它们：

// /pages/blog/index.vue
export default {
asyncData() {
return fetchArticles();  
}
}

// /pages/blog/_slug.vue
export default {
asyncData(context) {
// made available in nuxt.config.js
return context.payload;
}
}

// nuxt.config.js
export default {
generate: {
// generate dynamic routes
routes: async function() {
const collection = await fetchArticles();
const result = collection.map(item => {
return {
route: `/blog/${item.slug}`,
// save in payload, to make available in context
payload: item
};
});
return result;
}
}
}

问题：我们两次获取相同的集合。我们希望获取一次，然后使其可用于所有路由。

预期成果： 能够

1. 仅获取每个集合 1 次

2. 仅在服务器端存储所有集合，通过asyncData()将所需的内容传递给路由

3. 在客户端，无法访问该"服务器端存储">

实际结果：

• 必须为多个路由重新获取相同的集合

Answer 1

只需像填写单个博客文章一样填充您的/blog/index.vue，即可使用有效负载。 您只需要确保从静态路由列表中排除/blog 路径。您可以尝试此 https://github.com/nuxt/nuxt.js/issues/2719#issuecomment-508583281。或者发出nuxt build && nuxt generate --no-build命令(这样所有静态路由都将被排除，您需要手动指定它们(。

附注：

因为 context.payload 仅适用于动态路由

我刚刚尝试了上面的方法，它奏效了。