在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()?
},
3条答案
按热度按时间5t7ly7z51#
这可以在任何组件中使用
$nuxt
助手轻松完成:参见https://nuxtjs.org/docs/internals-glossary/$nuxt/#refreshing-page-data
lnlaulya2#
您无法访问asyncData方法,因为它在呈现之前由服务器端的nuxt调用。当然,您可以操作镜像asyncData的数据对象。所以我猜你有一个像这样的数据组件:
它与asyncData返回的内容合并,并显示在客户端中。因此,无需重新加载您的页面,您可以操作“主题”,它将反映在客户端。就像这样:
或者你可以在同一个方法中的delete调用之后进行另一个API调用。
无论哪种方式,都要在delete调用之后更新'topic'数组,这就是在客户端中显示的内容。
sg3maiej3#
我终于找到了解决办法
请不要忘记在操作时返回,刷新页面时会正确运行