Почему страница динамически не обновляется?

Question

[maniacus26]

Добрый день!
Есть страничка на nuxt (10.10.10.253:3000) которая обращается к бэкэнду на Django REST Framework (10.10.10.253:8000). Страничка содержит в себе перечень статей (posts) получаемых от бэка. Сведения отображаются, но любые изменения видны только через обновление страницы.
Например у статьи меняю заголовок, а изменения видны только после перезагрузки страницы.

<script>
import axios from "axios";
export default {
  async asyncData(ctx) {
    const { data } = await axios.get(`http://10.10.10.253:8000/api/posts/`);
    return {
      posts: data.results,
    }
  }
}
</script>

Как добиться того что бы любое изменение в статье (заголовок, текст, картинка) приводило к обновлению на главной странице (index.vue) ?

Comments

[WapSter]

А как ты обновляешь данные?

[maniacus26]

WapSter, Например просто создаю новую статью, а она не появится без обновления страницы.
Но так же пробовать через PATCH и PUT обновлять имеющиеся статьи, тоже только после обновления страницы виден результат.
Добавляю новые статьи и обновляю имеющиеся через POSTMAN.

[GeminiX]

Ваши данные же на бэке хранятся, и клиент не знает что там меняется, пока вы данные не запросите. В какой момент клиент должен запросить свежие данные? Периодически?

[maniacus26]

Александр, похоже что да. Я считал (наивный) что axios по дефолту регулярно обращается к бэку и тянет изменения, но видимо это не так. Так что как вариант вижу периодический запрос данных. Тогда вопрос в реализации такого подхода.

[GeminiX]

maniacus26, axios это просто клиент, который упрощает дя вас работу с http запросами. Начните хотябы с периодического выполнения запроса через интервал, через js setInterval.

Answer 1

[Олег Кириллов]

Используйте fetch() вместо asyncData() и для обновления данных вызывайте this.$fetch(). В текущем варианте данные не могут и не будут обновляться без перезагрузки страницы.