Nuxt.js: Scrolling

[Jussiadev]

Hello. I already created a similar issue but no one answered. I moved a little further into its implementation. Now I'm using viex to store data, but I still do not understand how to apply my scroll.js to my .vue page.

photos.vue

<template>
    <div>
        <div v-for="photo in photoItems">
            <p>{{photo.id}}</p>
            <img :src="photo.url" alt="">
        </div>
    </div>
</template>


<script>
    export default {
        computed: {
            photoItems () { return this.$store.state.photos.photoItems}
        },
        created () {
            this.$store.dispatch('photos/fetchPhotos')
        }
    }
</script>

store/photos.js

import Axios from 'axios'

export const state = () => ({
    photoItems: []
})

export const actions = {
    fetchPhotos (state) {
        Axios.get('https://jsonplaceholder.typicode.com/photos')
            .then((res) => {
            state.commit('setPhotos', res.data.slice(0,50))
    })
    }
}

export const mutations = {
setPhotos: (state, data) => {
    state.photoItems = Object.assign({}, data)
}
}

And my scroll.js

var app = new Vue({
    el: '#preview-list',
    data: {
        goods: []
    }
});
$(function() {

    var imgs = app.goods;
    var prevScroll = 0,
        step = 1,
        requestAllowed = true,
        $pagination = $('.clear-both'),
        $list = $('#preview-list-items'),
        limit = 6,
        offset = 0,
        url ='https://jsonplaceholder.typicode.com/photos';
    loadData();
    console.log('2', imgs);


    $(window).scroll(function() {

        var scroll = $(window).scrollTop(),
            endOfProducts = $pagination.offset().top - $(window).height(),
            direction = scroll > prevScroll,
            stepMap = step >= 0 && step <= 3;

        if (step == 3) {
            requestAllowed = false;
            $('#preview-buttons a').show();
        } else {
            $('#preview-buttons a').hide();
        }

        if (scroll > endOfProducts && requestAllowed && direction && stepMap) {
            loadData();
        }

        prevScroll = scroll;
    });

    $('#preview-show-more').click(function() {
        $(this).blur();
        step = 0;
        requestAllowed = true;
        $('#preview-buttons a').hide();
        loadData();
    });


    function loadData() {

        requestAllowed = false;
        axios.get(url)
            .then(function (response) {
                requestAllowed = true;
                var data = [];
                for (var i = 0, max = response.data.length; i < max; i++) {
                    imgs.push(response.data[i]);
                }
                imgs.length = limit;
                console.log('i', imgs);
                limit += limit;
                step++;
            })
            .catch(function (error) {
                console.log(error);
            });
    }
});

_{This question is available on Nuxt.js community (#c1483)}

[homerjam]

As I've said to you before (several times ; )

You need to refactor your scroll.js code into a plugin. The plugin should be included in your nuxt.config.js. This way it will be executed with access to the store and the window, the scroll listener should dispatch an action in the store.

In the store you should create an action which loads posts and commits them to the state.

In your component you should bind your template to the state (using the data() or computed property).

You'll need to study the nuxt and vuex documentation carefully so that you understand these concepts.

Good luck!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.