时间戳

首页 > 解决方案 > NuxtJS (Vue)：如何将帖子列表放入组件或布局中？

javascript - NuxtJS (Vue)：如何将帖子列表放入组件或布局中？

问题描述

我正在使用 nuxt-content 创建一个静态博客。我正在尝试创建一个列出帖子（/content/posts/xxx.md）的导航栏。这样我只需要在帖子目录中创建新的 .md ，导航栏就会相应地更新。

为此，我需要一个可以循环浏览的所有帖子的列表，但目前我正在努力获取此列表。

在NuxtJS 关于创建静态博客的这篇博文中，我可以看到他们通过下面的代码得到了我想要的东西，但是它在页面上（它可以执行组件/布局无法执行的操作）。如何在组件（首选）或布局上复制它：

<script>
export default {
  async asyncData({ $content, params }) {
    const posts = await $content('posts', params.slug)
      .only(['title', 'description', 'slug', 'author'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return {
      posts
    }
  }
}
</script>

任何帮助深表感谢！

标签： javascriptvue.jsnuxt.js

解决方案

您可以使用vuex商店并将您的帖子保存在商店中。然后，您可以使用从商店获取您的帖子getters

如何将您的帖子保存到商店？您可以为此使用NuxtServerInit操作。它可以访问该context对象，您可以$content从那里访问您的对象并通过以下方式保存您的帖子mutation

然后在您的导航栏组件中，您可以获取您的posts使用商店getters

推荐阅读