NuxtJs中如何刷新Async Data()获取的数据？

Question

在 NuxtJs 应用程序中，我通过 AsyncData() 方法在服务器端获取了 data()。

例如，我需要在不重新启动浏览器的情况下删除一个条目并刷新页面。

在纯 Vue 中，我会编写一个 ajax 方法来在删除后从服务器更新数据。通常此方法与初始加载相同，位于“已安装”中。但是 NuxtJs 我不能再次访问方法 async 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()?
    },

Answer 1

这很容易在任何组件中使用$nuxt 帮助器完成：

await this.$nuxt.refresh()

见https://nuxtjs.org/docs/internals-glossary/$nuxt/#refreshing-page-data

Answer 2

您无法访问 asyncData 方法，因为它在渲染之前由服务器端的 nuxt 调用。但是，您当然可以操作镜像 asyncData 的数据对象。所以我猜你有一个像这样的数据组件：

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

它与 asyncData 返回的内容合并，是客户端中显示的内容。因此，无需重新加载页面，您就可以操纵“主题”，它将反映在客户端中。像这样的：

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
},

无论哪种方式，您都可以在删除调用后更新“主题”数组，这就是您的客户端中显示的内容。