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/2.x/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
},

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