Infinite Scroll with images are reloading



  • Hi, I’m using vuex, and I have a list of post with an infinite scroll component. Problem is that every time vuex is updated it reloads all images in the list. How I can avoid to reload all images each time onLoad() runs?



  • I think that you must provide more code for anyone to be helpful… Are you perhaps replacing the entire array in the vuex store?



  • Sure, I have this code below.
    ////////
    Vuex
    /////////
    /*
    action
    */
    export function getPosts ({commit, state}) {
    var params, posts

    commit(‘startLoadingPosts’, true)

     params = state.get.params
    
    posts = {}
    
    params = encodeURIComponent(JSON.stringify(params))
    
    baseAxios.get(
        `${state.get.url}/posts?params=${params}`
      )
        .then( response =>{
          posts =  response.data
    
          commit('updatePosts', posts)
        })
        .catch( err =>{
    
          
          commit('setResponse', err )
         
        }).then(()=>{
          commit('startLoadingPosts', false)
        })
    

    }

    /*
    Mutation
    */
    export function updatePosts (state, obj) {

    state.get.snapshot=  obj.snapshot
    state.get.last = obj.posts;
    

    //console.log(‘new posts’, obj)

     state.get.posts =  {...state.get.posts, ...obj.posts} 
    

    }

    the posts are an object and to join them I use the spread operator, it may be this? because I’m creating a new object?

    Thanks for the reply!



  • https://www.loom.com/share/a12017a8a5e74203a308b39f13a143d9

    I tried to do it with a “for in” to avoid to change the posts already created, but still happening the same

    for (const key in newPosts) {
    if (newPosts.hasOwnProperty(key)) {
    const newPost = newPosts[key]
    state.get.posts[key] = newPost
    }
    }

    I have my home page with :

    <item-list :passedPosts=“posts”>
    </item-list>

    posts is a computed property that gets from the store:

    computed:{
    posts(){
    //console.log('store ', this.$store)
    return this.$store.state.http.get.posts
    },
    }

    then a list component getting the posts from another computed passed from the properties:

    <template v-else-if="$sal.objLen(posts)">
    <q-infinite-scroll @load=“onLoad” :offset=“250” class=“fit row wrap justify-start content-start text-center”>

          <single-item v-for="(post, index) in posts" :key="index" :passedItem="post"  class="q-mb-md"></single-item>
           
       
          <template v-slot:loading  >
              <div class="row justify-center q-my-md ">
                <q-spinner-tail
                  color="primary"
                  size="5em"
                />
               
              </div>
            </template>
          <div class="q-pa-lg flex flex-center full-width">
            
            <q-pagination v-if="0 == 1" :direction-links="true" :max="5" :value="params.page" @input="changePage($event, 'page')">
            </q-pagination>
             <template v-if="$sal.objLen($store.state.http.get.last) == 0 ">
                No more posts Found
              </template>
          </div>
            
           </q-infinite-scroll>
    
       </template>
    

    computed:{
    posts(){
    return this.passedPosts
    }
    },

    and finally the the single item component that gets the post from the v-for using the id of the post as a key (it’s a string id from firebase). And a computed property item to get data from property “itemPassed” from parent list component

    computed :{

      item(){
    
        
        var newItem = this.passedItem
        if(this.$store.state.auth.currentUser){
          var user = this.$store.state.auth.currentUser
          var user_id = user.uid
        }
    
    
        if(typeof newItem.likes != 'undefined'  && typeof newItem.likes[user_id] != 'undefined'){
         //console.log('user uid', user_id )
         //console.log(newItem.likes[user_id] )
    
          newItem.userLikes = newItem.likes[user_id]
    
        }
        
        var item = {
          ...this.itemDefault,
          ...newItem
        }
        item.rating = item.rating / 2
    
        return item
    
      },
      loadingPosts(){
                return this.$store.state.http.get.loadingPosts
            }
    },


  • @MiquelCapo

    lots of code snippets all over the place does not make it easier to understand.

    So did you fix or are you still asking for help?



  • @dobbel No, I couldn’t solve it.

    What makes not to reload all the images? maybe somebody has an answer to this and I can solve it faster… Or any body knows some tutorial?

    Thanks again



  • @MiquelCapo

    Often the best way to get your problem solved here is by making a codepen.io ( extend a quasar example for easy setup) that demonstrates the problem.


Log in to reply