NuxtJs의 Async Data()에 의해 취득된 데이터를 갱신하려면 어떻게 해야 합니까?

NuxtJs의 Async Data()에 의해 취득된 데이터를 갱신하려면 어떻게 해야 합니까?

NuxtJs 앱에서는 AsyncData() 메서드로 서버 측에서 data()를 취득했습니다.

예를 들어 브라우저를 재시작하지 않고 하나의 항목을 삭제하고 페이지를 새로 고쳐야 합니다.

순수 Vue에서는 삭제 후 서버에서 데이터를 갱신하는 ajax 메서드를 씁니다.일반적으로 이 방법은 초기 부하와 동일하며 "마운트"에 위치합니다.그러나 NuxtJs는 메서드 비동기 Data()에 다시 액세스할 수 없습니다.아니면 내가 할 수 있을까?

   async asyncData({$axios, params}) {
        const {data} = await $axios.$get(`/topics/${params.id}`)

        return {
            topic: data
        }
    },

  -------------------------

   async deletePost(id) {
            await  this.$axios.$delete(`/topics/${this.topic.id}/posts/${id}`)
                // bad idea - hard reset
                   window.location.reload(true)
                //how refresh by asyncData()?
    },

이것은, 를 사용해 간단하게 실시할 수 있습니다.$nuxt모든 컴포넌트에서 도우미:

await this.$nuxt.refresh()

https://nuxtjs.org/docs/internals-glossary/$nuxt/ #http://https://nuxtjs.org/docs/internals-glossary/$nuxt/ 를 참조해 주세요.

asyncData 메서드는 렌더링 전에 서버 측에서 nuxt에 의해 호출되므로 액세스할 수 없습니다.그러나 물론 비동기 데이터를 미러링하는 데이터 개체를 조작할 수 있습니다.다음과 같은 데이터 컴포넌트가 있습니다.

data() {
  return {
    topic: [],
  }
}

이것은 비동기 데이터가 반환하는 것과 병합되며 클라이언트에 표시됩니다.따라서 페이지를 새로고침할 필요 없이 '토픽'을 조작할 수 있으며 클라이언트에 반영됩니다.다음과 같은 경우:

async deletePost(id) {
  await this.$axios.$delete(`/topics/${this.topic.id}/posts/${id}`)
  this.topic... //change it to reflect what was deleted.
},

또는 삭제 콜 후에 같은 방법으로 다른 API 콜을 발신할 수도 있습니다.

await this.$axios.$delete(`/topics/${this.topic.id}/posts/${id}`)
  let {data} = await $axios.$get(`/topics/${this.topic.id}`)
  return this.topic = data
},

어느 쪽이든 삭제 호출 후 '토픽' 어레이를 업데이트하면 클라이언트에 표시됩니다.

언급URL : https://stackoverflow.com/questions/53821555/how-to-refresh-the-data-obtained-by-async-data-in-nuxtjs