如何使用来自自己 Api 的 Nuxt Js 预渲染内容？

Question

我有一个 Vuex 商店

/store/articles.js

export const state = () => ({
  article:'',
})
export const mutations = {
  setArticle(state, payload) {
    state.article= payload.data;
  }
}
export const actions = {
  async getArticle ({ commit }, id) {
    try {
      const { data } = await axios.post('http://test.local/api/getArticle',id);
      commit('setArticle', { data })
    } catch (e) {
      console.log(e);
    }
  }
}

我的APIreturns一个JSON像这样的例子

{
  "id": 1,
  "title": "some title",
  "content": "some content",
  "image": "article_img1.jpg"
}

我的页面和内容来自 API

/pages/article/slug.vue

<template>
  <div> 
    <h4>{{ article.title }}</h4>
    <img :src="'/images/'+article.image" />
  <div v-html="article.content" />
  </div>
</template>

<script>
export default {
  computed:{
      article(){
        return this.$store.dispatch('getArticle',1)
      },
  },
}
</script>

内容看起来不错，但是当我查看内容页面代码时，没有任何内容。这种方式如何让内容预渲染？

以及如何从 API 生成静态页面，我需要使用 @nuxt/content 吗？我正在尝试这个，但它看起来只适用于 .md 或 .json 文件，我不明白如何通过一些 API 提取自动生成。

Answer 1

您完全可以从 API 生成页面，而不需要 nuxt/content。我在这里写了一个深入的答案：

显示如何在构建期间实现干净的页面生成。
否则，您也可以按照此处文档中描述的步骤操作：https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate#function-which-returns-a-promise

此外，请务必在 nuxt.config.js 文件中将 ssr 设置为 true。

Answer 2

为此使用 nuxt asyncData 挂钩。

<template>
  <div> 
    <h4>{{ article.title }}</h4>
    <img :src="'/images/'+article.image" />
  <div v-html="article.content" />
  </div>
</template>

<script>
export default {
  computed: {
      articles() {
          return this.$store.state.article
      }
  },
  async asyncData() {
      await this.$store.dispatch('getArticle',1)
  },
}
</script>

这将使 nuxt 在服务器上等待 promise 解析。

Answer 3

async asyncData({params, store}) {
      articles: await store.dispatch('articles/articlesById', {'id': params.id, 
      return {articles};
    },

这有效

我做了配置中的 ssr 为真

如何使用来自自己 Api 的 Nuxt Js 预渲染内容？

How to prerender content with Nuxt Js from own Api?

vue.js

vuex

nuxt.js