时间戳

首页 > 解决方案 > 如何使用自己的 Api 中的 Nuxt Js 预渲染内容？

vue.js - 如何使用自己的 Api 中的 Nuxt Js 预渲染内容？

问题描述

我有一个 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);
    }
  }
}

我的 API 返回一个像这样的 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 获取自动生成。

标签： vue.jsnuxt.jsvuex

解决方案

为此使用 nuxtasyncData钩子。

<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 在服务器上等待承诺解决。

推荐阅读