@jekanok

Почему infinity scroll, работает не корректно vue(vuex) express.js?

Проблема в том что, когда я загружаю первую запись в списке все рабоатет корректно, но когда я вертаюсь назад без перезагрузки страницы и захожу на другую запись у меня подгружает не по порядку записи, почему происходит так?

// вызов на получение данных (1)
  async asyncData({ params, store }) {
    try {
      await store.dispatch('order/fetchId', params)
    } catch (e) {}
  },
 data() {
    return {
      page: 2
 }
},mounted() {
    const eventHandler = () => {
      const scrollTop = document.documentElement.scrollTop
      const viewPortHeight = window.innerHeight

      const totalHeight = document.documentElement.offsetHeight
      const atTheBottom = scrollTop + viewPortHeight === totalHeight

      if (atTheBottom) {
        _.debounce(() => {
          this.load(this.page) // вызиваемо собитие при scroll 
        }, 400)()
      }
    }

    window.addEventListener('scroll', eventHandler)
  },
  methods: {
    async load(page = 2) {
      try {
        console.log(page)
        await this.$store.dispatch('order/fetchLoadPage', {
          page: +this.page,
          id: this.$route.params.id
        })
        await this.page++
      } catch (e) {
        // console.log(e)
      }
    }
}

// back end
// вызов на получение данных (1)
module.exports.fetchId = async (req, res) => {
  const { id } = req.params
  try {
    const order = await Order.findById(id)
    const tickets = await Tickets.find({ id_order: id })
      .limit(100)
      .sort({
        numberTickets: 1
      })
    return res.json({ order, tickets })
  } catch (e) {
    return res.json(e)
  }
}
// второй вызов который будет при скролле
module.exports.fetchLoadPage = async (req, res) => {
  const { id, page } = req.params
  const perPage = 100
  const newTickets = await Tickets.find({ id_order: id })
    .sort({ numberTickets: 1 })
    .skip(perPage * page - perPage)
    .limit(perPage)
  return await res.json(newTickets)
}

5f592bb53c00f223014190.png

5f592bc572328789950891.png
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы