Как правильно лениво подгружать данные во Vue?

Question

[skuvaWeb]

У меня есть компонент с постами, всего их допустим 100. Так же есть компонент с каждым постом отдельно. Реализовано через vue-router. Сами посты подгружаются по 20 штук (я понимаю что 100 постов можно загрузить сразу, пример академический). Так вот, первые 20 постов загружаются при запуске приложения, остальные - когда пользователь достаточно проскроллил вниз. Но пользователь может ввести в адресной строке id поста вручную, и если пользователь не загрузил посты изначально, и попытался получить доступ к посту с id 65, то он ничего не увидит, потому что они ещё не подгрузились.

1) Что делать в такой ситуации?
2) А как поступать если постов всего 100, а пользователь хочет посмотреть например 102?

Comments

[alex]

у вас два разных роута. /posts и /posts/:id. какая разница, что и когда загружается. либо я не понял, либо вы проблему плохо описали

[skuvaWeb]

Alex, извиняюсь, забыл упомянуть что данные подгружаются во vuex. Соответственно данные подгружаются в единое хранилище. Затем при клике на кнопку "подробнее" по айди забираем из state нужный объект с описанием поста.
То есть я не могу показать пост, если он не был загружен, а если загружать все сразу, то я не смогу реализовать "ленивую" загрузку

[alex]

skuvaWeb,

забираем из state нужный объект

зачем? делайте просто запрос к БД для конкретного поста. когда юзер заходит на /posts/:id, просто вытягиваете этот id и делаете action. сделайте для этого дела отдельное поле в хранилище currentPost, типа:

state: {
    posts: [{}, {}, {}, ...],
    currentPost: {}
  }

spoiler

// posts.vue
  created() {
    api.getPosts({
      limit: 20,
      offset: 20
    })
      .then(posts => this.$store.commit('SET_POSTS', posts))
  }

// post.vue
  created() {
    const postID = this.$route.params.id
    
    api.getPost({
      id: postID
    })
      .then(post => this.$store.commit('SET_CURRENT_POST', post))
  }

Answer 1

[Maksim B]

существуют компоненты "виртуальных списков" для организации огромных списков и рендером только тех, что видны в данный момент. для поиска отдельной записи лучше дергать запрос к АПИ.

https://github.com/tangbc/vue-virtual-scroll-list/...

Comments

[Voenniy]

Круто, спасибо