vue.js 如何在NuxtJ中刷新Async Data()获取的数据?

bcs8qyzn  于 2023-05-18  发布在  Vue.js
关注(0)|答案(3)|浏览(265)

在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()?
    },
5t7ly7z5

5t7ly7z51#

这可以在任何组件中使用$nuxt助手轻松完成:

await this.$nuxt.refresh()

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

lnlaulya

lnlaulya2#

您无法访问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.
},

或者你可以在同一个方法中的delete调用之后进行另一个API调用。

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

无论哪种方式,都要在delete调用之后更新'topic'数组,这就是在客户端中显示的内容。

sg3maiej

sg3maiej3#

我终于找到了解决办法

// register page component

  async fetch({ store }) {

    await store.dispatch('places/countries/getCountriesAction');

  },

store folder 
places/countries.js

export const actions = {

  async getCountriesAction({ state,commit }) {

     return this.$axios('countries').then((e)=>{

      commit('InitializeData',e.data.data)

    });

  }
}

请不要忘记在操作时返回,刷新页面时会正确运行

相关问题