Как обновить данные, полученные с помощью Async Data () в NuxtJs?

Question

В приложении NuxtJs я получил данные () на стороне сервера методом AsyncData ().

Например, мне нужно удалить одну запись и обновить страницу без перезапуска браузера.

В чистом Vue я написал бы метод ajax для обновления данных с сервера после удаления.Обычно этот метод такой же, как и для начальной загрузки, и он находится в «смонтированном» состоянии.Но NuxtJ не может снова получить доступ к методу 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, и является тем, что отображается в клиенте.Таким образом, без перезагрузки страницы вы можете манипулировать «темами», и это будет отражено в клиенте.Примерно так:

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' после вызова delete, и это то, что отображается в вашем клиенте.