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

Question

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

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

在纯 Vue 中，我会编写一个 ajax 方法来在删除后从服务器更新数据。通常此方法与初始加载相同，位于 "mounted" 中。但是 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

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

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

与 asyncData returns 合并，并在客户端中显示。因此，无需重新加载您的页面，您就可以操作 'topics'，它会反映在客户端中。像这样：

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

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

Answer 2

在任何组件中使用 $nuxt 帮助程序都可以轻松完成此操作：

await this.$nuxt.refresh()

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

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

How to refresh the data obtained by Async Data() in NuxtJs?

vue.js

vuejs2

nuxt.js