고스트 블로그에서 API를 사용하여 Vue cli 프로젝트에서 게시물을 가져오는 방법

고스트 블로그에서 API를 사용하여 Vue cli 프로젝트에서 게시물을 가져오는 방법

Vue cli 프로젝트에 API를 사용하여 모든 게시물을 고스트 블로그에 표시하려고 한다.

이 페이지의 예는 nuxt 프로젝트에 관한 것이다.

종속성을 호출하고 블로그를 인증한 후 다음 게시물을 얻을 수 있는 기능을 만들면 된다.

export async function getPosts() {
  return await api.posts
    .browse({
      limit: "all"
    })
    .catch(err => {
      console.error(err);
    });
}

그런 다음 vue 페이지에서 다음을 수행하십시오.

<template>
  <ul>
    <li v-for="post in posts">{{ post.title }}</li>
  </ul>
</template>

<script>
  import { getPosts } from '../api/posts';

  export default {
    async asyncData () {
      const posts = await getPosts();
      return { posts: posts }
    }
  }
</script>

Nuxt에서는, 이것은 그냥 효과가 있다.노드에서, 그것은 또한 작동한다.

기능에 전화해서 모든 게시물을 받을 수 있고, 그게 다야.

하지만 vue에서 데이터 기능에 대해 다음과 같이 동일한 작업을 시도하면:

  data: () => {
   let posts = getPosts()
   return {
    resultado: posts,
  };
}

getPosts() 보류 중인 약속 반환

.그러면()으로 약속을 해결하려고 노력했는데 결과가 나오지만 데이터의 반환 부분에 전달이 안 된다.

  data: () => {
    let posts = getPosts()
      .then((results) => {
        return results;
      })
      .catch((err) => {
        console.error(err);
      });
    return {
      resultado: posts,
    };
  }

getPosts()의 결과를 템플릿에서 사용하려면 어떻게 해야 하는가?

고마워!

대신 라이프사이클 훅으로 다음을 수행하십시오.

data() {
  return {
    resultado: null
  }
},
async created() {  // or async mounted()
  this.resultado = await getPosts();
}

참조URL: https://stackoverflow.com/questions/64814031/how-to-get-posts-from-ghost-blog-using-the-api-on-a-vue-cli-project