Infinite Scroll with images are reloading

MiquelCapo

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?

beets

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

MiquelCapo

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!

MiquelCapo

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:

      <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
        }
},

dobbel

@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?

MiquelCapo

@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

dobbel

@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.

No More Posting New Topics!

Infinite Scroll with images are reloading